Question

我正在尝试制作一个菜单，其中的项目会在悬停时显示。我对jquery，css等很新，我无法弄清楚我的问题是什么。现在我确实让我的div显示在悬停状态，但不是只有一个显示出来。

如何仅显示我悬停的项目的div标签。

这是小提琴：

<ul class="navi">
    <li> <a class='light'>
            Item1
            <div class="hover-name" style="display:none">
                Businesses
            </div>
        </a>

    </li>
    <li> <a class='light'>
            Item2
            <div class="hover-name" style="display:none">
               Agencies
            </div>
        </a>

    </li>
    <li> <a class='light'>
            Item3
            <div class="hover-name" style="display:none">
                Billing Plans
            </div>
        </a>

    </li>
</ul>

http://jsfiddle.net/Samfr/

例如，如果我将鼠标悬停在Item1上，那么只会显示企业。仅限第2项代理商出现

谢谢

Answer 1

您正在使用以下内容显示项目：

$('.hover-name').show();

这样做的目的是找到具有.hover-name类的doucment中的所有内容并在其上执行show()函数。

您需要做的就是将显示行更改为上下文感知：

$(this).find('.hover-name').show();

使用$(this).find('.hover-name')会找到您在.hover-name类中悬停的内容中的所有元素，并显示，而不是显示所有元素。

此外，如果要在移动新元素时隐藏显示的元素，可以使用以下内容：

$('.navi > li a.light').hover(function () {
    $('.hover-name').hide();
    $(this).find('.hover-name').show();
});

$('.hover-name').hide();会隐藏.hover-name类的所有内容，然后显示您当前所在元素内的项目。

Answer 2

此代码将隐藏其他元素：

$('.navi > li a.light').hover(function () {
    $(this).parent().parent().find('.hover-name').hide();
    $(this).find('.hover-name').show();
});

<强> Fiddle

Answer 3

您可以使用事件的currentTarget，它将返回悬停的元素，您可以使用它来过滤以仅显示该元素的悬停名称：

   $('.navi > li a.light').hover(function (e) {
       $(e.currentTarget).find('.hover-name').show();
   });

（http://jsfiddle.net/Samfr/4/）

将鼠标悬停在列表项上，只显示一个项而不是全部

3 个答案: