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状态，而不是一个类。希望这不是一个错字。

CSS类恢复为不活动

1 个答案: