jquery - jquery菜单按钮鼠标悬停效果

Question

我有两个div。一个是 position:absolute (.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，我不知道该怎么做。

DIVS：

<div class="buttonEffectWrapper"></div>
<div id="rightColumnButtonText" >CAR SERVICE</div>
<div id="car-service-highlighted" class="rightColumnButtonHighlighted"></div>

<div class="buttonEffectWrapper"></div>
<div id="rightColumnButtonText" >TRAILER HAULING</div>
<div id="trailer-hauling-highlighted" class="rightColumnButtonHighlighted"></div>

效果见http://www.raceramps.com/v2。

Answer 1

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

Answer 2

<script type="text/javascript">

$(function(){

    $('.buttonEffectWrapper')

        .mouseover(function(){
            $(this).sibling('.rightColumnButtonHighlighted').stop().animate({opacity: 1}, {duration:300}
        })
        .mouseout(function(){
                    $(this).sibling('.rightColumnButtonHighlighted').stop().animate({opacity: 0}, {duration:300}
        })
});
</script>

那应该可以吗？不过有些不太对劲……

Answer 3

用这个：

$(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 上，这没问题，但是在您的函数中，您为所有 DIV 设置了动画，而不仅仅是当前的 DIV。函数内部的 $(this) 指的是当前元素。

ps：您可以使用jQuery中的悬停助手使代码更具可读性：

$(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)

Answer 4

这是因为您选择了所有具有“rightColumnButtonText”类的元素。你需要做一个$(this).siblings('.rightColumnButtonText').stop().animate({opacity: 1}, {duration:300})

Answer 5

最终的工作代码......谢谢大家！

$(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 } );

        }
    );
} );