CODEWITHSUNDEEP
jqueryhtmlcss
ablase
ablase

Reputation: 11

Jquery for active state + ID on mouseover

I'm using the example from here: Jquery Show/Hide when Hover. It's working great for showing the div content when the user hovers over a link. And only shows the next div content when the next link is hovered over.

The problem is I also want to create an active state for that link on mouseover and fade it out when there is a new mouseover.

It's difficult for me because the active state is controlled by an ID, not a class. Is there a way to do this?

Right now I'm using:

 $('div.animalcontent').hide();
 $('div').hide();
 $('a.animal').bind('mouseover', function() {
    $('div.animalcontent').fadeOut();
 $('#'+$(this).attr('id')+'content').fadeIn();
 });

And this is what my links look like:

<a href="dogcontent" class='animal' id='dog'>Dog</a>
<a href="catcontent" class='animal' id='cat'>Dog</a>
<a href="snakecontent" class='animal' id='snake'>Dog</a>

Controls these divs:

<div id='dogcontent' class='animalcontent'>Some dog content</div>
<div id='catcontent' class='animalcontent'>Some cat content</div>
<div id='snakecontent' class='animalcontent'>Some snake content</div>

The only CSS that works for highlighting the Active state is using:

a#dog:active
a#cat:active
a#snake:active

The inclusion of the different ID's is over my head.

Upvotes: 0

Views: 159

Answers (1)

pablito.aven
pablito.aven

Reputation: 1165

For active states I use a class.

 $('div.animalcontent').hide();
 $('div').hide();
 $('a.animal').bind('mouseover', function() {
    $('.active').removeClass('active');
    $(this).addClass('active');
    $('div.animalcontent').fadeOut();
 $('#'+$(this).attr('id')+'content').fadeIn();
 });

And in the CSS you should use the class selector:

a#dog.active{}
a#cat.active{}
a#snake.active{}

Upvotes: 1

Related Questions