爲什麼jQuery mouseover無法正常工作？

Question

我想要它，所以當你將鼠標懸停在兩個圖像中的任何一個上時，它都會觸發相應的<figcaption>。我擁有它，所以當你將鼠標懸停在兩張圖片中的任何一張上時，它只會隱藏第一張圖片。我對jQuery不太好，但我很積極，有辦法做到這一點。

這裏的小提琴：http://jsfiddle.net/gxQkQ/2/

Answer 1

標識的必須是唯一的。

試試這個：

$('img').mouseover(function(){ 
     $(this).next().slideUp(200); 
    }).mouseleave(function(){ 
     $(this).next().slideDown(200); 
    }); 

演示：http://jsfiddle.net/AmitJoki/gxQkQ/4/

Answer 2

使用$(this).find('figcaption')來獲取當前徘徊figcaption，

試試這個

$(document).ready(function() { 
    $('#q-omega').on('click', function() { 
     $('#search-bar').fadeToggle(400); 
    }); 
    $('figure').mouseover(function() { 
     $(this).find('figcaption').slideUp(200); 
    }).mouseleave(function() { 
     $(this).find('figcaption').slideDown(200); 
    }); 
}); 

DEMO

Answer 3

第一：一個元素的ID必須是唯一的，這樣用類/元素選擇器將它們分組

所以

<figcaption class="caption"> 

然後

$('figure').mouseover(function() { 
    $(this).find('.caption').slideUp(200); 
}).mouseleave(function() { 
    $(this).find('.caption').slideDown(200); 
}); 

演示：Fiddle