如何将 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 类的方法在特定的 href 链接中，以便我可以淡入这个。我希望这更清楚！

感谢您的任何帮助。

缺口

Answer 1

将 $(".current") 更改为 $(".current", this)：修改后，仅包含 .current 元素链接将被更改。
修改选择器：div[id^=nav]将选择所有ID以“nav”开头的DIV元素

注意：更改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',
        },

    });
});