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

我建议添加和删除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");  
    }
);

Answer 2

使用toggleClass()更改课程通常会更好。更好的是，只需使用:hover CSS伪造类，就可以在没有jquery的情况下做一些简单的事情。

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

然后：

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

或

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

使用JQuery返回默认颜色

2 个答案: