事件状态的 Jquery + 鼠标悬停时的 ID

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>

唯一用于突出显示事件状态的 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{}