CSS类恢复为非活动状态

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

.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来处理像这样添加活动状态,

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

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

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

为什么会这样？

1> Praveen Kuma..：

---

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

.bbbLink img.active {

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

---

@NichoDiaz你的问题令人困惑.你在浏览器中用CSS做的是,当我点击我的鼠标时,做我喜欢的事情,而不是**当添加类时,做我喜欢的事情.你明白区别吗？所以添加类是最好的.`:)`使用`:active`是最糟糕的!`:P`