jquery - 悬停后按钮的背景颜色消失

Question

我一直在处理菜单栏，在我将 id 设置为事件状态后，我将鼠标悬停在它上面，我设置的新颜色消失了，菜单项恢复为原来的颜色。有任何想法吗？ 这是我的 JSFiddle:http://jsfiddle.net/Z5M2a/2/

$(document).ready(function(){
    $('#active').mouseover(function() {
         $(this).css('background-color',  '#CCC');
    });
    $('#active').mouseout(function() {
         $(this).css('background-color',  '#CCC');
    });
    $('.menuOption').mouseover(function() {     
         $(this).css('background-color', '#999999');
    });
    $('.menuOption').mouseout(function() {
         $(this).css('background-color', '#e9e9e9');
     });
 });

HTML:

<div id="side-bar"> 
                <ul class="side-nav">
                  <li class="divider"></li>
                  <li class="menuOption" id="active"><a href="#">Link 1</a></li>
                  <li class="divider"></li>
                  <li class="menuOption"><a href="#">Link 2</a></li>
                  <li class="divider"></li>
                  <li class="menuOption"><a href="#">Link 3</a></li>
                  <li class="divider"></li>
                  <li class="menuOption"><a href="#">Link 4</a></li>
                  <li class="divider"></li>
                </ul>   
           </div>

Answer 1

问题是 #active 也是一个 .menuOption，并且您明确设置了所有 的 background-color >.menuOption 元素设置为 mouseout 事件的特定背景色，这会覆盖先前设置的 #active 元素的 background-color.

将您的代码重新排序为:

$(document).ready(function () {
    $('.menuOption').mouseover(function () {
        $(this).css('background-color', '#999999');
    });
    $('.menuOption').mouseout(function () {
        $(this).css('background-color', '#e9e9e9');
    });
    $('#active').mouseover(function () {
        $(this).css('background-color', '#CCC');
    });
    $('#active').mouseout(function () {
        $(this).css('background-color', '#CCC');
    });
});

JS Fiddle demo .

然后问题就消失了。

顺便说一下，要使用 CSS(要简单得多)，只需添加以下规则:

#active:hover {
    background-color: #ccc;
}

.menuOption:hover {
    background-color: #999;
}

JS Fiddle demo .