如何保持錨在相同的狀態爲：點擊後懸停狀態？

我指定的僞國爲我的鏈接: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; 
}

來源

2014-09-04 Abhimanyu

您已經定義增加值寬度和高度：懸停&：激活狀態，使它一樣：

width:200px; height:60px;

來源

2014-09-04 09:33:30

看起來它已經固定，但我會只需編寫規則，以便:active狀態保留與:hover狀態相同的寬度和高度，如下所示：

.textPool a:hover, .textPool a:active { 
    height: 100px; 
    width: 290px; 
}

如果使用薩斯或更少你可以編寫規則一次，然後將其導入。

這裏有一個的jsfiddle爲你惹：jsfiddle.net/qfhnsy93/

來源

2014-09-04 09:43:13 danwarfel

它仍然無法正常工作。 – Abhimanyu 2014-09-05 07:30:35

點擊之後，它仍然擴大，即使不徘徊。 – Abhimanyu 2014-09-06 03:32:08

不適合我。我沒有看到那個動作。你的設置是什麼樣的？此外，您不清楚您正在尋找什麼動作/動畫。這裏只有我的0.02美元，但這個動畫看起來過時和豔麗。你爲什麼不嘗試一些更現代和微妙的東西呢？ – danwarfel 2014-09-08 07:20:10

如何保持錨在相同的狀態爲：點擊後懸停狀態？

回答

相關問題