jQuery CSS 禁用了原来的悬停样式

Question

我有一个名为“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。

现在我的 styles.css:

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

Answer 1

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