使用JQuery返回默认颜色

Question

我有一个下拉菜单，我使用mouseenter()函数。如果鼠标进入我的选择器区域背景颜色返回到黄色。但是，如果我离开了选择器的区域，我想设置选择器区域的默认颜色，而不使用mouseleave()函数。

我该如何解决？

$(document).ready(function(){ 
    $("#l_ev_men").mouseenter(function(){ 
     $(this).css("background-color","yellow"); 
     $(this).css("color","black"); 
    }); 

    $("#l_ev_men").mouseleave(function(){ // ı dont want to use this function 
    }); 
}); 

Answer 1

使用toggleClass()来更改班级通常会更好。更妙的是，如果不使用jQuery，只需使用:hover CSS psuedo类就可以做到这一点。

.hoverable:hover { 
    background-color:yellow; 
    color:black; 
} 

则：

<li class="hoverable <otherstuff>">...</li>... 

或

<td class="hoverable <otherstuff>">...</td>... 

Answer 2

我会推荐添加和删除CSS类。

#l_ev_men:hover, #l_ev_men.hover { 
    color: black; 
    background-color: yellow;  
} 

并非所有的浏览器都对支持：hover伪选择，你可以使用addClass()和removeClass()，这将在CSS的#l_ev_men.hover选择相匹配。

$("#l_ev_men").hover(
    function in(){ 
     $(this).addClass("hover"); 
    }, 
    function out(){ 
     $(this).removeClass("hover"); 
    } 
);