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

回答

相關問題