如何將jQuery懸停腳本應用於正在懸停的鏈接中的div類？

Question

我不認爲我的問題是如此清楚，但希望我可以在這裏更清楚。

我有以下懸停腳本：

$("nav a#index").hover(
    function() { 
     $(".current").animate({ 
      opacity: 1 
     }, { 
      duration: 300, 
      specialEasing: { 
       opacity: 'linear', 
      }, 

     }); 
    }, function() { 
     $(".current").animate({ 
      opacity: 0 
     }, { 
      duration: 3000, 
      specialEasing: { 
       opacity: 'linear', 
      }, 

     }); 
    }); 

我用它來淡入圖像與絕對定位的DIV：

<div id="nav1"> 
    <a href="index.html" class="fade nav top current" id="index"> 

    <div class="nav-image"><img src="images/bodhi-leaf-green.png"></div> 

    <div id="current"><img src="images/bodhi-leaf-green.png"></div> 
    <div class="text"><img src="images/home.png"></div> 

    </a> 
</div> 

因爲我需要在多個導航div的懸停效果，例如nav2，nav3等，我需要懸停腳本爲每個這些，或者說，我希望找到一種方法來編寫一個腳本，將適用於我的所有導航鏈接，所以這將開始於：

$("nav a").hover(

，然後就碰到這樣的：

function() { 
      $(this ".current").animate({...... 

即我找指一個div類在一個特定的A HREF鏈接，這樣我可以在淡化這種的方式，我希望這是更清晰！

感謝您的任何幫助。

尼克

Answer 1

變化$(".current")到$(".current", this)：此修改後，只有鏈路內的.current元素將被改變。
修改選擇：div[id^=nav]將選擇所有的div元素的ID開始 「nav」

注意：更改id="index"到class="index"。

$("div[id^=nav] a.index").hover(
function() { 
    $(".current", this).animate({ 
     opacity: 1 
    }, { 
     duration: 300, 
     specialEasing: { 
      opacity: 'linear', 
     }, 

    }); 
}, function() { 
    $(".current", this).animate({ 
     opacity: 0 
    }, { 
     duration: 3000, 
     specialEasing: { 
      opacity: 'linear', 
     }, 

    }); 
}); 

Answer 2

試試這個：

$("a#index").hover(
function() { 
    $(this).parent().find(".current").animate({ 
     opacity: 1 
    }, { 
     duration: 300, 
     specialEasing: { 
      opacity: 'linear', 
     }, 

    }); 
}, function() { 
    $(this).parent().find(".current").animate({ 
     opacity: 0 
    }, { 
     duration: 3000, 
     specialEasing: { 
      opacity: 'linear', 
     }, 

    }); 
});