将鼠标悬停在每个元素上，但不悬停在悬停元素上

Question

我有一个非常经典的菜单：当我们点击菜单bttn时，附近会出现一个文字......

结构：

<ul id="menu">
    <li class="menu-point">
        <span class="menu-text"></span>
        <a class="menu-bttn"></a>
    </li>
    <li class="menu-point">
        <span class="menu-text"></span>
        <a class="menu-bttn"></a>
    </li>
    <li class="menu-point">
        <span class="menu-text"></span>
        <a class="menu-bttn"></a>
    </li>
</ul>

我不知道如何让隐藏的元素只显示悬停的菜单点...我的问题是每个元素，以及 NOT THE HOVERED 元素是动画但隐藏的元素。

    $('#menu li a').bind({
        mouseenter: function() {
            $('.menu-text').animate({'opacity':1});
        },
        mouseleave: function() {
            $('.menu-text').animate({'opacity':0});
        }
    });

现在，当我将鼠标悬停在菜单bttn上时，所有菜单文本都可见。如何在菜单bttn悬停时使菜单文本可见？

小提琴：http://jsfiddle.net/igorlaszlo/ht27090o/

Answer 1

你实际上并不需要jQuery。这是一个简单的CSS解决方案：

#menu .menu-point:hover .menu-text {
    opacity: 1;
}

Updated Example

---

关于你的问题..

要分别引用每个元素，请使用$(this).prev('.menu-text')。

Updated Example

$(this).prev('.menu-text').animate({
    'opacity': 0
});

$('#menu li a').bind({
    mouseenter: function () {
        $(this).prev('.menu-text').animate({
            'opacity': 1
        });
    },
    mouseleave: function () {
        $(this).prev('.menu-text').animate({
            'opacity': 0
        });
    }
});

Answer 2

试试这个

Fiddle Demo

    $('#menu li a').bind({
        mouseenter: function() {
            $(this).prev('.menu-text').animate({'opacity':1});
        },
        mouseleave: function() {
            $(this).prev('.menu-text').animate({'opacity':0});
        }
    });