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

它工作正常，但它适用于 all 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

使用此：

$(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中使用hover帮助器来使代码更具可读性：

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

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

Answer 4

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

        }
    );
} );

jquery菜单按钮鼠标悬停效果

5 个答案: