CSS类恢复为非活动状态

Question

我正在为图像添加一个类.

.bbbLink img { 
    outline: 1px solid #ddd;
    border-top: 1px solid #fff;
    padding: 10px;
    background: #f0f0f0;
}

在悬停时我添加了这个,

.bbbLink img:hover { 
    background-color: rgba(0, 0, 0, 0.1);
    outline: 1px solid #ddd;
    border-top: 1px solid #fff;
    padding: 10px;
    background: #f0f0f0;
}

为了活跃,我这样做,

.bbbLink img:active {
    outline: 1px solid #111 !important;
    border-top: 1px solid #555 !important;
    padding: 10px !important;
    background: #333 !important;
}

因为我将活动类添加到图像而你不能这样做,因为它是一个自我关闭元素我使用jquery来处理像这样添加活动状态,

<script>
(function($) {
$('.bbbLink').click(function() {
    $(this).toggleClass('active');
});
})( jQuery );
</script>

即使在单击我的活动类出现的元素后检查dom时,一切都很完美.

<a id="wrapbbb" class="bbbLink active" href="img.jpg" target="_blank">
<img src="content/uploads/-2-018.jpg" alt="BBB">
</a>

问题是当我按下鼠标并单击时,显示活动状态并且样式生效但是当我释放单击时,活动状态样式消失了......

活动类仍然在dom中,但样式效果将恢复为没有活动状态的类.

为什么会这样？

Answer 1

呃......你需要像这样给CSS:

.bbbLink img.active {

当你拥有时:active,它是一个状态,活跃/ mousedown状态,而不是一个类.希望这不是一个错字.