jquery菜單按鈕鼠標懸停效果

我有兩個div。一個是position：absolute（.buttonEffectWrapper），位於另一個div的頂部（稱爲.rightColumnButtonHighlighted）。jquery菜單按鈕鼠標懸停效果

我也有下面的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。

來源

2009-12-31 Jared

你的HTML真的看起來像那樣嗎？名稱「buttonEffectWrapper」會建議它下面的兩個DIV將在該DIV內... – 2009-12-31 15:32:43

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

來源

2009-12-31 15:38:42 David

你的工作和我想出的最終結果一樣好，所以你得到了投票。 – Jared 2009-12-31 15:56:52

使用此：

$(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不僅僅是當前之一。 $（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)

來源

2009-12-31 15:03:03

感謝您提供有關$（this）的信息。不幸的是，我正在尋找更多由.buttonEffectWrapper觸發的效果，但應用於兄弟.rightColumnButtonHighlighted。 – Jared 2009-12-31 15:22:45

我已更新代碼 – 2009-12-31 15:31:19

這是因爲您正在選擇類「rightColumnButtonText」的所有元素。你需要做一個$(this).siblings('.rightColumnButtonText').stop().animate({opacity: 1}, {duration:300})

來源

2009-12-31 15:06:05

這可能會讓我走上正軌。它實際上是一個兄弟姐妹，而不是一個孩子。有一個兄弟姐妹（）對嗎？ – Jared 2009-12-31 15:23:18

兄弟姐妹（）是你在找什麼。 – 2009-12-31 18:25:11

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

應該工作正確嗎？有些事情雖然不太正確...

來源

2009-12-31 15:26:56 Jared

最後的工作代碼...謝謝大家！

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

     } 
    ); 
});

來源

2009-12-31 15:57:23 Jared

jquery菜單按鈕鼠標懸停效果

回答

相關問題