我指定的僞國爲我的鏈接:hover
和:active
。上懸停,錨定的大小(<a>
)增加。當我點擊它時,:active
狀態被激活。如何保持錨在相同的狀態爲:點擊後懸停狀態?
但是現在,當:active
國家的過去,框返回到原點,a:link
狀態的大小(尺寸),並因爲仍然有鼠標懸停時,:hover
狀態被重新激活,再次增加大小。
這似乎是默認行爲,但看起來令人困惑:
- 你將鼠標懸停在鏈接,它擴展
- 你點擊它
- 它收縮了一下
- 它擴展再次
HTML
<div class="textPool">
<a href=""><p>Japan and Porn<span> Ban on Child Porn, Boku no Pico, and More</span></p></a>
<a href=""><p>Cool Japan and Her Creative Industries</p></a>
<a href=""><p>Death Note<span> The "Sequel" and the Mid-2007 Days</span></p></a>
<a href=""><p><span>Insight Into</span> Indian Anime Trends</p></a>
<a href=""><p><span>Quick</span> Anime Production Summary</p></a>
<a href=""><p>Hetalia</p></a>
<a href=""><p>Ace of Diamond</p></a>
</div>
CSS
.textPool {
width: 300px;
height: 460px;
}
.textPool a {
font-family: 'Ubuntu Condensed', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: -1px;
font-size: 14px;
color: blue;
background: rgba(188,143,143,.8);
display: block;
text-decoration: none;
border-bottom: none;
width: 200px;
height: 60px;
float: right;
box-shadow: 0 2px 12px 3px rgba(0,0,0,.5);
transition: all .25s ease-out;
}
.textPool a:hover, .textPool a:focus, .textPool a:active {
height: 100px;
width: 290px;
font-size: 20px;
color: navy;
}
.textPool a:active {
background: rgba(188,143,143,1.0);
}
.textPool a p {
text-align: center;
padding: 0 7px;
}
.textPool a p span {
display: inline;
color: white;
}
.textPool a:last-child {
border-radius: 0 0 7px 7px;
}
.textPool a:first-child {
border-radius: 7px 7px 0 0;
}
它仍然無法正常工作。 – Abhimanyu 2014-09-05 07:30:35
點擊之後,它仍然擴大,即使不徘徊。 – Abhimanyu 2014-09-06 03:32:08
不適合我。我沒有看到那個動作。你的設置是什麼樣的?此外,您不清楚您正在尋找什麼動作/動畫。這裏只有我的0.02美元,但這個動畫看起來過時和豔麗。你爲什麼不嘗試一些更現代和微妙的東西呢? – danwarfel 2014-09-08 07:20:10