CODEWITHSUNDEEP
javascriptjquerycsshover
Mike
Mike

Reputation: 3418

Mouseleave jQuery event will remove the click effect

ok, I have a tabbed page and on click of a tab, I am showing a particular section and highlighting this tab to red background. Now I want to use the hover effect and on hover the tab should highlight to red background. It works but then when I mouseleave from the clicked tab, the background effect goes away.

In short, How do I highlight the tab to red background on hover for this fiddle

Upvotes: 1

Views: 421

Answers (2)

Virendra
Virendra

Reputation: 2553

Use this:

#nav ul li:hover
{
  background: red;  
}

Update: Here is the fiddle for your mouseenter and mouseleave events. Here is the code that I added.

CSS

.lihover{background: red;}

jQuery

$("li").mouseenter(function(){
  $(this).addClass("lihover");
}).mouseleave(function(){
  $(this).removeClass("lihover");
});

Upvotes: 1

Adam Rackis
Adam Rackis

Reputation: 83358

Why not use some pure css for this:

#nav ul li:hover { background-color: red; }

Updated Fiddle

EDIT

If you're trying to do this with jQuery (as a learning experience), I would define a new css class called hoverRed

.hoverRed { background-color: red; }

then use the hover function:

$("#nav ul li").hover(function() {
   $(this).addClass("hoverRed");
}, function() {
   $(this).removeClass("hoverRed");
});

The first function gets called when the hover begins, the second gets called when the hover ends (and the mouse leaves)

updated fiddle

Upvotes: 2

Related Questions