CSS类恢复为非活动

CSS Class Reverts to Not Active

本文关键字：非活动 恢复 CSS      更新时间：2023-09-26

我正在向图像中添加一个类。

.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中，但样式效果会恢复到没有活动状态的类。

为什么会发生这种情况？

呃。。。你需要给出这样的CSS：

.bbbLink img.active {

当您有:active时，它是一个状态，活动/鼠标放下状态，而不是一个类。希望这不是一个拼写错误。

相关文章：