Question

我有一个这样的“垂直”图片库：

<div class="image-container>
    <div class="nav">
        <div class="next"><a href="info"><img src="arrow_trans.png" alt="Next" /></a>  
    </div>    

    <div id="vert-gallery">
        <div id="first-row" class="link-image"><img src="Image_1.png" /></div>
        <div id="second-row" class="link-image"><img src="Image_2.png" /></div>
        <div id="third-row" class="link-image"><img src="Image_3.png" /></div>
        <div id="first-row" class="link-image"><img src="Image_4.png" /></div>
    </div>
</div>

如果我将鼠标悬停在其中任何一张图片上，我希望显示导航箭头。我一直在用：

$(".link-image").hover(function() {
    $("div.nav").show();
    },

        function() {
    $("div.nav").hide();
});

这使得导航箭头出现在所有图像上（因为它们属于同一个类）。

如何让它只显示在我正在盘旋的图像上而不是其他图像上？

修改

就我而言，div.nav是image-container的一部分。我可能在同一页面上有多个容器。

Answer 1

在悬停回调（或任何回调）中使用this关键字来定位当前悬停的元素。

如果div.nav是所有.link-image元素的后代，您可能更喜欢这样的内容：

$('.link-image').bind('mouseover', function () {
    $('div.nav').hide(); // hide all div.nav elements.

    $(this).find('div.nav').show(); // show the one for the current mouse-overed element. 
});

Answer 2

如果nav div位于每个链接图像div中，则将此选项添加到选择器中。

$(".link-image").hover(function() {
        $("div.nav", this).show();
    },
    function() {
        $("div.nav", this).hide();
    }
);

JSFiddle Example

Answer 3

您可以使用this关键字，它将引用传递事件的当前对象。（我可能是错的，如果我是的话，请纠正我。）

阅读http://api.jquery.com/hover/

所以你可以使用，但这取决于你隐藏所有图像开头：

$(".link-image").hover(function() {
    $(this).find('img').toggle();
    },

        function() {
    $(this).find('img').toggle();
});

注意：我没有测试过这个代码

使用jQuery为一组图像中的特定图像显示导航箭头

3 个答案: