Question

好吧，所以我有一些代码问题：

$(document).ready(function(){
    $("div.post.photo img").hover(function () {
        $("div.show").slideToggle("fast");
    });
});

现在，它就像一个冠军。除了它同时出现在所有图像上的事实。我试图找出如何分别对每张图片进行处理，但我没有最直接的线索。

我要特别做的是，只有当您将鼠标悬停在特定图像上时才会在图像上发生悬停事件。当您将鼠标悬停在图像上时，div会弹出一些花哨的标题，依此类推。但是，当我将鼠标悬停在一张图像上时，所有其他图像都显示相同的内容（我理解为什么，而不是如何修复它）。

我认为它与添加this有关，但我是JQuery的新手而且我迷路了。

HTML：

<div class="post photo">
    <img src="source" />
    <div class="show">
        <div class="caption">
        Caption
        </div>
    </div>
</div>

感谢您的帮助。

Answer 1

$(document).ready(function(){
    $("div.post.photo img").hover(function () {
        $(this).next("div.show").slideToggle("fast");
    });
});

Answer 2

有了这个，你可以忽略你把“show”div放到“post photo”类div中的位置：

$(document).ready(function(){
    $("div.post.photo img").hover(function () {
        $(this).parent().children("div.show").slideToggle("fast");
    });
});

悬停事件在单独的图像上独立发生

2 个答案: