Question

我为链接指定了伪状态: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;
}

Answer 1

看起来它已经修复了，但我只想写一条规则，以便:active状态保持与:hover状态相同的宽度和高度，如下所示：

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

如果您使用 Sass或更少，您可以编写规则一次，然后导入它。

这里有一个 JSFiddle 让你搞砸了：jsfiddle.net/qfhnsy93/

Answer 2

您已为宽度和高度定义了增加的值：hover＆amp; ：活动状态，使其与：

相同

width:200px; height:60px;

如何使锚点处于与其相同的状态：点击后悬停状态？

2 个答案: