0

我一直在处理菜单栏，在将 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>
4

2 回答 2

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 小提琴演示。

问题消失了。

顺便说一句，要使用 CSS（这要简单得多），只需添加以下规则：

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

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

JS 小提琴演示。

于 2013-08-05T19:25:14.110 回答
0

保存项目颜色，当鼠标移出时，返回原始颜色。

$(document).ready(function(){
    var itemColor;
    $('#active').mouseover(function() {

        $(this).css('background-color',  '#CCC');
    });
    $('#active').mouseout(function() {

        $(this).css('background-color',  itemColor);
    });
    $('.menuOption').mouseover(function() {     
          itemColor = $(this).css('background-color');
        $(this).css('background-color', '#999999');
    });
    $('.menuOption').mouseout(function() {

        $(this).css('background-color', itemColor);
    });
});
于 2013-08-05T19:28:32.047 回答