jquery菜单按钮鼠标悬停效果

我有两个div。一个是位置：绝对（.buttonEffectWrapper），位于另一个div的顶部（称为.rightColumnButtonHighlighted）

我还有以下JS代码：

$(function(){
 $('.buttonEffectWrapper')
  .mouseover(function(){
   $('.rightColumnButtonHighlighted').stop().animate({opacity: 1}, {duration:300})
  })
  .mouseout(function(){
     $('.rightColumnButtonHighlighted').stop().animate({opacity: 0}, {duration:300})
  })
});

它运行良好，但它适用于所有div。我需要它只适用于当前的div，我不知道如何做到这一点

分区：

汽车服务
拖车牵引

有关效果，请参见。

使用此选项：

$(function(){
    $( '.buttonEffectWrapper' ).mouseover ( function () {
        $( this ).next ( '.rightColumnButtonHighlighted' ).stop ().animate ( { opacity: 1 }, { duration: 300 } );
    } ).mouseout ( function () {
        $( this ).next ( '.rightColumnButtonHighlighted' ).stop ().animate ( { opacity: 0 }, { duration: 300 } );
    } );
} );

您将为每个匹配的DIV附加一个“hover”事件处理程序，这是正常的，但是在您的函数中，您为所有DIV设置了动画，而不仅仅是当前DIV。 $（此）在函数中引用当前元素

ps：您可以在jQuery中使用helper使代码更具可读性：

$(function(){
    $( '.buttonEffectWrapper' ).hover (
        function () {
            $( this ).next ( '.rightColumnButtonHighlighted' ).stop ().animate ( { opacity: 1 }, { duration: 300 } );
        },
        function () {
            $( this ).next ( '.rightColumnButtonHighlighted' ).stop ().animate ( { opacity: 0 }, { duration: 300 } );
        }
    );
} );

---

我已经更新了代码。使用

next（）

获取

$（this）

之后的下一个元素，这是因为您选择的是类为“rightColumnButtonText”的所有元素。你需要做一个

$（this）.兄弟（'.rightcolumnbuttonext'）.stop（）.animate（{opacity:1}，{duration:300}）

$（函数（）{ $（'.buttonEffectWrapper'） .mouseover（函数（）{ $（this）.sibling（'.rightColumnButtonHighlighted'）.stop（）.animate（{opacity:1}，{duration:300} }) .mouseout（函数（）{ $（this）.sibling（'.rightColumnButtonHighlighted'）.stop（）.animate（{opacity:0}，{duration:300} }) });

---

这应该行得通吧？不过有些地方不太对劲….

最终的工作代码…谢谢大家

$('.buttonEffectWrapper').hover(function() {
    $(this).siblings('.rightColumnButtonHighlighted:first').stop().animate({opacity: 1}, {duration:300});
}, function() {
    $(this).siblings('.rightColumnButtonHighlighted:first').stop().animate({opacity: 0}, {duration:300})
})

$(function(){
    $( '.buttonEffectWrapper' ).hover (
        function () {

            var effect = $(this).siblings().filter(":last");
            effect.stop ().animate ( { opacity: 1 }, { duration: 300 } );

        },
        function () {
                    var effect = $(this).siblings().filter(":last");
                  effect.stop ().animate ( { opacity: 0 }, { duration: 300 } );

        }
    );
} );

---

感谢您提供有关$（此项）的信息。不幸的是，我一直在寻找由.buttonEffectWrapper触发的效果，但该效果将应用于兄弟。rightColumnButtonHighlighted。这可能会让我走上正确的轨道。它实际上是兄弟姐妹，而不是孩子。有一个兄弟姐妹（）对吗？兄弟姐妹（）就是你要找的。你的HTML真的是这样吗？名字“ButtoneEffectWrapper”意味着它下面的两个DIV将在这个DIV中…你的工作方式和我得出的最终结果一样好，所以你得到了投票。

$('.buttonEffectWrapper').hover(function() {
    $(this).siblings('.rightColumnButtonHighlighted:first').stop().animate({opacity: 1}, {duration:300});
}, function() {
    $(this).siblings('.rightColumnButtonHighlighted:first').stop().animate({opacity: 0}, {duration:300})
})

$(function(){
    $( '.buttonEffectWrapper' ).hover (
        function () {

            var effect = $(this).siblings().filter(":last");
            effect.stop ().animate ( { opacity: 1 }, { duration: 300 } );

        },
        function () {
                    var effect = $(this).siblings().filter(":last");
                  effect.stop ().animate ( { opacity: 0 }, { duration: 300 } );

        }
    );
} );