在每个元素上悬停动画但不在悬停的元素上

Question

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

结构：

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

我不知道如何使悬停菜单点的隐藏元素可见...我的问题是 EACH 元素，以及 NOT THE HOVERED 元素是动画的但隐藏的元素。

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

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

Fiddle : 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});
        }
    });

在每个元素上悬停动画但不在悬停的元素上

hover animation on each element but not on the hovered element

each

jquery

hover