Javascript jQuery-使用最近的选择器在悬停时显示和隐藏div

我试图使用jquery的

hover

函数简单地实现hover上的显示/隐藏特性

但是，无法显示和隐藏特定的

div

。当我将鼠标悬停在当前

span

标记上时，我只想隐藏当前（最近的）

div

，并显示最近的或下一个可能的

div

但目前由于类名相同，它显示了所有的

div

HTML结构：

<div class="parentCat">
    <div class="imageContainer">
        <span class="hoverEffect">Some Image</span>
    </div>
    <div class="showContainer">
        <span>New Image</span>
    </div>
</div>
<div class="parentCat">
    <div class="imageContainer">
        <span class="hoverEffect">Some Image</span>
    </div>
    <div class="showContainer">
        <span>New Image</span>
    </div>
</div>

一些图像
新形象
一些图像
新形象

如果将事件转移到父元素，一切都会变得更简单：

$('.ca').hover(function () {
    $('.imageContainer', this).hide();
    $('.showContainer', this).show();

}, function () {
    $('.imageContainer', this).show();
    $('.showContainer', this).hide();
});

---

.

如果将事件转移到父元素，则一切都会变得更简单：

$('.ca').hover(function () {
    $('.imageContainer', this).hide();
    $('.showContainer', this).show();

}, function () {
    $('.imageContainer', this).show();
    $('.showContainer', this).hide();
});

---

.

如果您想要这种效果，您需要修改代码。包含悬停事件的div不能是您正在隐藏的div。将相关的div嵌套在父div中也是一种很好的做法。我相信这就是您正在寻找的

HTML

---

如果你想要这种效果，你需要修改你的代码。包含悬停事件的div不能是您正在隐藏的div。将相关的div嵌套在父div中也是一种很好的做法。我相信这就是您正在寻找的

HTML

---

你不能那样做。您正在将悬停事件绑定到正在隐藏的div的子元素。一旦div隐藏，您就不可能保持边项的悬停，因为它不再显示在窗口中。这就是你看到的疯狂闪烁效应的原因。你不能这么做。您正在将悬停事件绑定到正在隐藏的div的子元素。一旦div隐藏，您就不可能保持边项的悬停，因为它不再显示在窗口中。这就是你看到的疯狂闪烁效应的原因。我的要求是让它按照问题的要求工作。我可以通过使用

not

选择器使其正常工作来解决问题。我怎么能不像所附的小提琴那样悬停呢？我的要求是让它按照问题的要求工作。我可以通过使用

not

选择器使其正常工作来解决问题。我怎么能不像所附的小提琴那样悬停呢？我的要求是让它按照问题的要求工作。我可以通过使用

not

选择器使其正常工作来解决问题。我怎么能不像附加的小提琴一样悬停。你必须将悬停事件绑定到父容器，这是唯一的方法。我已经稍微更改了小提琴。我想要一个类不做悬停部分。请检查上面评论中的小提琴。我的要求是让它按照问题进行工作。我可以通过使用

not

选择器使其正常工作来解决问题。我怎么能不像附加的小提琴一样悬停。你必须将悬停事件绑定到父容器，这是唯一的方法。我已经稍微更改了小提琴。我想要一个类不做悬停部分。请在上面的评论中检查小提琴。

$('.hoverEffect').hover(function () {
    $(this).find('.imageContainer').hide();
    $(this).find('.showContainer').show();

}, function () {
    $(this).find('.imageContainer').show();
    $(this).find('.showContainer').hide();
});