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

【问题标题】：Hover event to occur independently on separate images悬停事件在单独的图像上独立发生
【发布时间】：2011-10-02 08:47:20
【问题描述】：

好的，所以我有一些代码：

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

感谢您的帮助。

【问题讨论】：

共享 HTML 标记，如果没有一些示例标记，我们无法猜测您要做什么。

标签： jquery image hover

【解决方案1】：

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

【讨论】：

+1 这是一个反问。当我发布我的答案时，答案中没有包含 HTML 代码。

【解决方案2】：

有了这个，你可以忽略你将“显示”div 放入“post photo”类 div 的位置：

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

【讨论】：