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

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

我有三个背景设置使用css background-image。我使用jQuery来附加一个点击事件。你能帮我确定为什么悬停状态停止工作吗？

谢谢。

'为什么我的悬停状态在我点击其中一个图像后处于非活动状态>>为什么你对同一元素有两个点击事件 – bipen

悬停时没有任何反应会被推翻。你什么意思？ –

@bipen我不知道如何合并这两个点击事件 – user2432458

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

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

2013-05-29 13:08:42 Michael

它没有工作。点击状态仅在鼠标悬停时显示。它应该在我们点击图片后显示。任何想法？谢谢。 – user2432458

这是因为您使用图像，在悬停和活动状态下使用文本并将属性更改为颜色和边距。这样会更好。 – Michael

当jQuery的更改背景图片，它这样做inline，在它修改实际的HTML。这意味着新的背景图像比在#one:hover中设置的更多specific，因此它不能覆盖它。

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

2013-05-29 13:08:42 Andy

这就是为什么不直接设置CSS值更聪明，而是使用类或类似的代替。也有助于分离逻辑和格式。 – CBroe

@andy每个图像中都有3个条件。空闲，悬停和点击。当我们添加！对CSS很重要时，点击状态仅在鼠标悬停时显示。我希望它在我们点击图片后立即显示。任何其他想法来解决这个问题？谢谢你的方式 – user2432458

@ user2432458那么我会建议的是，而不是每次更改元素的图像，只需添加和删除类''.clicked'具有'background-image：url（）' – Andy

，你是越来越是因为你被设置与使用jQuery CSS属性背景内嵌的问题，我已经解决了你的问题的演示。

我删除的代码将其插入背景的一部分，而只是增加了一个.active类代码，所以当元素，在用户点击，我设置类的元素。我希望你喜欢！

2013-05-29 13:13:08

@ Wallysson努涅斯。感谢你的回答。我如何显示点击状态图像？这个数字应该在我们点击后的底部。 – user2432458

这是没有问题的，我已经改变了代码，这里是新的例子：http://jsfiddle.net/J3x7M/5/ 我做的基本事情是将新的类的.active类拆分为所需的图像，这是底部编号。希望有所帮助... :) –

@ Wallysson Nunes。谢谢你nunes！多么伟大和简单的脚本。 – user2432458

回答