鼠标悬停时的活动状态+ ID的Jquery

Question

我正在使用此处的示例： Jquery Show/Hide when Hover。 当用户将鼠标悬停在链接上时，它非常适合显示 div 内容。并且仅在下一个链接悬停时显示下一个 div 内容。

问题是我还想在鼠标悬停时为该链接创建一个活动状态，并在有新鼠标悬停时将其淡出。

这对我来说很难，因为活动状态是由一个 ID 控制的，而不是一个类。有没有办法做到这一点？

我现在正在使用：

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

这就是我的链接的样子：

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

控制这些 div：

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

唯一可以突出显示 Active 状态的 CSS 是使用：

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

包含不同的 ID 超出了我的想象。

Answer 1

对于活动状态，我使用一个类。

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

在 CSS 中你应该使用类选择器：

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