CODEWITHSUNDEEP
jquerycss
hakki
hakki

Reputation: 6521

Return to default color with JQuery

I have a dropdown menu and I'am using mouseenter() function. If mouse enters to my selector's area background-color returning to yellow. But ıf I leave from my selector's area I want to set default colour of my selector's area without using mouseleave() function.

How can I fix it? 

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

Upvotes: 1

Views: 232

Answers (2)

Edorka
Edorka

Reputation: 1811

I would recomend adding and removing CSS classes.

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

Not all browsers have support for the :hover pseudo-selector, you can use addClass() and removeClass() , this will match the #l_ev_men.hover selector on the CSS.

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

Upvotes: 5

PaulProgrammer
PaulProgrammer

Reputation: 17630

It's usually better to change the class using toggleClass(). Even better, you can do something this simple without jquery just using the :hover CSS psuedo class.

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

then:

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

or

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

Upvotes: 3

Related Questions