按钮的背景颜色在盘旋后消失

我一直在菜单栏上工作，在将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>

来源

2013-08-05 Andrew

而你这样做与jQuery而不是CSS，因为？ – putvande

同意。请检查['：hover']（http://css-tricks.com/pseudo-class-selectors/） – lbstr

重新排列你的处理（最后处理'#active'），你可能会发现问题出在哪里：[demo] （http://jsfiddle.net/davidThomas/Z5M2a/3/）。 –

问题是#active也是.menuOption，而你明确地将所有.menuOption元素background-color到一个特定的背景颜色在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。

来源

2013-08-05 19:25:14

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

$(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-05 19:28:32 Armen

按钮的背景颜色在盘旋后消失

回答

相关问题