Question

$("document").ready(function () {
       $('#eventTarget').bind("mouseover", changeColor);//This doesnt work
       $('#eventTarget').bind("mouseleave", changeColor);//This doesnt work

       $('#eventTarget').bind("click", function(){   //This code works
              $('#eventTarget').unbind("mouseover", changeColor);
              $('#eventTarget').unbind("mouseleave", changeColor);
              $('#eventTarget').html("<p> click event handler Canceled</p>");
       }); 
    });
  function changeColor(evt) {
      $('#eventTarget').toggleClass("highlight");
    }

CSS：

.highlight
{
    background-color:Red
}
.normal
{ 
    background-color:Yellow

}

HTML正文：

    <div id="eventTarget" class="normal">
    HardCoreProg...

* All activity
* Subscriptions
* Recommendations
</div>

Answer 1

JavaScript很好，您的问题是highlight和normal CSS类互相争斗以控制background-color。如果您使用!important强制解决问题：

.highlight {
    background-color: Red !important
}

然后它可以正常工作：http://jsfiddle.net/ambiguous/LQqgb/

Answer 2

更改高亮CSS类，如下所示：

.highlight
{
    background-color:Red !important;
}

作为奖励，使用hover函数通过一行代码绑定到mouseover和mouseleave事件：

$('#eventTarget').hover(changeColor, changeColor);

Answer 3

等一下，您不需要仅使用!important来确保应用样式定义。尝试通过更加具体的方式为CSS选择器添加权重 - 它会立即执行您想要的操作，如果需要，您仍然可以在CSS文件中覆盖它。

#eventTarget.highlight {
    background-color: red;
}

.normal {
    background-color: yellow;
}

有关CSS特异性如何工作的更多信息，请查看Smashing Magazine上的这篇文章：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

编辑：也许我应该链接到W3C的特异性文件呢？ http://www.w3.org/TR/CSS2/cascade.html#specificity

我的鼠标悬停，mouseleave不起作用

3 个答案: