单击后，css悬停状态变为非活动状态

Question

在此fiddle上，点击其中一个框后，悬停状态变为非活动状态，并且不再显示。

我有三个使用css background-image设置背景的方框。我正在使用jQuery附加click事件。你能帮我确定悬停状态停止工作的原因吗？

感谢。

Answer 1

当jQuery更改背景图片时，它会inline，因为它会修改实际的HTML。这意味着新的背景图片比#one:hover中的设置更加specific，因此无法覆盖它。

您需要在!important上的每个新背景图片后添加:hover，以确保其具有覆盖它的特异性。

DEMO

Answer 2

因为li的内联样式会覆盖你的css：hover选择器属性。 使用!important使其正常工作：

li#one:hover{
    background-image: url(http://i1287.photobucket.com/albums/a628/botpro7/1_hover_zps6b4b99c1.png)!important;
}

Answer 3

你得到的问题是因为你使用jquery设置了css属性的内联背景，我已经做了一个解决你的问题的演示。

DEMO

我删除了插入背景的代码部分，只是在代码中添加了.active类，因此当用户单击元素时，我会在元素上设置该类。 我希望你喜欢！