jQuery CSS 禁用了原始的悬停样式答案

【问题标题】：jQuery CSS disables the original hover-stylejQuery CSS 禁用了原始的悬停样式
【发布时间】：2015-12-01 13:26:29
【问题描述】：

我有一个名为“msg_div”的 div，在 styles.css 中有这样一行：

.msg_div:hover { background-color: #eee; }

现在我将此脚本添加到页面：

$(".msg_div").css("background-color", "#FFF");
$(this).css("background-color", "#EEE");

但是现在没有任何悬停样式了。我该如何解决这个问题？

我的意图是当我点击一个框时，灰色背景应该切换到点击的div。

编辑（这是 HTML 代码）：

<script>
    $(".msg_posteingang_div").click(function(){
        $(".msg_div").css("background-color", "#FFF");
        $(this).css("background-color", "#EEE");
    })
</script>
<div class="msg_div">Message 1</div>
<div class="msg_div">Message 2</div>
<div class="msg_div">Message 3</div>
<div class="msg_div">Message 4</div>

编辑 2： 解决方案是为.msg_div 类本身创建一个样式（在styles.css 中），而不仅仅是为:hover。

我现在的样式.css：

.msg_div { padding:5px; cursor: pointer; }
.msg_div:hover { background-color: #eee; }

【问题讨论】：

"我有一个名为 "msg_div" 的 div，在 styles.css 中有这样一行：.msg-div:hover { background-color: #eee; }" 在css 看到破折号-，在js 看到_ 下划线？
对不起，这是一个写作失败：/因为当我删除 js 时，悬停工作完美
$(this) 引用 js 是什么？ “我的意图是，当我单击一个框时，灰色背景应该切换到单击的 div。” click 事件未在 Question 中定义？，但是css:hover？可以在 Question 中包含html，创建stacksn-ps 来演示？
$(this) 只是用户单击的一个对象，而不是整个班级.msg_box。我可以包含 html
可以包含.msg_posteingang_div html ?

标签： jquery css

【解决方案1】：

你在你的 CSS 中使用了 msg-div。和你的 javascript 中的 msg_div。确保您的元素命名正确。

【讨论】：

【解决方案2】：

将!important 添加到悬停background-color 样式：

.msg_div:hover { background-color: #eee!important; }

这是工作示例：

http://jsfiddle.net/e9d5e67c/1/

请注意，此解决方案是最快的解决方案（但有效:)），您可能想了解发生这种情况的原因并尝试此处描述的更好解决方案：CSS hover selector for background-color not working after dynamic change of background-color with jquery

【讨论】：