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

【问题标题】：css hover state becomes inactive after click单击后css悬停状态变为非活动状态
【发布时间】：2013-05-29 13:02:49
【问题描述】：

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

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

谢谢。

【问题讨论】：

why is my hover state inactive after i click one of the image >>为什么同一个元素会有两次点击事件
悬停时不会发生任何事情，因为它会被翻转。你什么意思？
@bipen 我不知道如何合并这两个点击事件

【解决方案1】：

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

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

【讨论】：

这就是为什么不直接设置 CSS 值，而是使用类或类似的东西通常更聪明的原因。也有助于逻辑和格式的分离。
@andy 每个图像中有 3 个条件。空闲，悬停并单击。当我们将 !important 添加到 css 时，单击状态仅在 mouseout 时显示。我希望它在我们单击图像后立即显示。任何其他想法来解决这个问题？顺便谢谢
@user2432458 然后我建议不要每次都更改元素的图像，只需添加和删除具有background-image: url()的类，例如.clicked

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您遇到的问题是因为您使用 jquery 使用 css 属性设置背景内联，我制作了一个演示来解决您的问题。

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

【讨论】：

@Wallysson Nunes。感谢您的回答。如何显示单击状态图像？我们点击后应该在底部的数字。
没问题，我已经更改了代码，这是新示例：jsfiddle.net/J3x7M/5 我所做的基本操作是将 .active 类拆分为新类与您需要的图像，这是与底数。希望对您有所帮助... :)
@Wallysson Nunes。谢谢修女们！多么伟大而简单的脚本。