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

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

1 个答案: