Return to default color with JQuery

Question

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

You can use .hover() instead of mouse enter/leave - api.jquery.com/hover — Matt
– Matt, Commented Jul 11, 2013 at 15:39
because ı have many selectors which they are different type, some of them ul, some of them li, div etc.. — hakki
– hakki, Commented Jul 11, 2013 at 15:39
You could use the CSS class #l_ev_men:hover, but browser support varies. What's the reason to use mouseleave? — Adrian Wragg
– Adrian Wragg, Commented Jul 11, 2013 at 15:39

Edorka · Accepted Answer · 2013-07-11 16:06:46Z

5

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");  
    }
);

edited Jul 11, 2013 at 16:06

answered Jul 11, 2013 at 15:39

Edorka

1,81113 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

PaulProgrammer · Accepted Answer · 2013-07-11 15:40:30Z

3

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>...

answered Jul 11, 2013 at 15:40

PaulProgrammer

18k4 gold badges46 silver badges61 bronze badges

Collectives™ on Stack Overflow

Return to default color with JQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related