Question

我有一个名为＆＃34; msg_div＆＃34;在styles.css我有这样的一行：

$data['playlistSongs'] = array_map(function($song) use($this) {
  return $this->_song->getSongsInPlaylist($song);
}, $data['songsPlayList']);

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

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

但现在不再有任何悬停风格了。我该如何解决这个问题？

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

编辑（这是HTML代码）：

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

编辑2： 解决方案是为<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>类创建一个样式（在styles.css中），而不仅仅是.msg_div。

我的styles.css现在：

:hover

Answer 1

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

Answer 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

jQuery CSS禁用原始悬停样式

2 个答案: