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设置为{的特定背景颜色{1}}事件，覆盖先前设置的mouseout元素的#active。

将您的代码重新排序为以下内容：

background-color

JS Fiddle demo

问题就消失了。

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

$(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

Answer 2

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

$(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);
    });
});

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

2 个答案: