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

我试图简单地实现使用jQuery的hover函数悬停的显示/隐藏功能。jQuery - 使用最接近的选择器在悬停时显示和隐藏div

但是无法显示和隐藏特定的div。当我将鼠标悬停在当前的span标记上时，我只想要显示当前（最近的）div隐藏以及最近的或下一个可能的div。

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

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>

来源

2015-12-02 user2281858

你不能做到这一点。您将悬停事件绑定到正在隐藏的div的子元素。一旦div隐藏起来，就不可能保持侧项的悬停，因为它不再显示在窗口中。这是什么导致你看到的疯狂闪烁效应。 – magreenberg

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

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

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

Updaated working example。

来源

2015-12-02 20:53:37 Fenton

我的要求是让它按照这个问题工作。我可以通过尝试使用“不”选择器来工作。 http://jsfiddle.net/qsLg1ry5/1/我怎么可以不在附带的小提琴悬停。 – user2281858

如果你想要这个效果，你需要改变你的代码。有悬停事件的div不能是你隐藏的那个div。将父div的相关div嵌入到INSIDE中也是很好的做法。我相信这是你正在寻找的。

HTML

<div class="ca hoverEffect" style="height:40%"> 
     <div class="imageContainer"> 
      <span>Some Image</span> 
     </div> 
     <div class="showContainer"> 
      <span>New Image</span> 
     </div> 
    </div>

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

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

Working jsfiddle

来源

2015-12-02 21:05:12 magreenberg

我的要求是让它按照这个问题工作。我可以通过尝试使用“不”选择器来工作。 http://jsfiddle.net/qsLg1ry5/1/我怎么可以不在附带的小提琴悬停。 – user2281858

您必须将悬停事件绑定到父容器，这是唯一的方法。 – magreenberg

我已经改变了小提琴。我想要一个班不做悬停部分。请在上面的评论中查看小提琴。 – user2281858

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

回答

相关问题