將圖像懸停在圖像上時jQuery中的問題？

我有一個列出圖像的頁面。當我將鼠標懸停在該圖像上時，它會在圖像上顯示播放圖標。將圖像懸停在圖像上時jQuery中的問題？

我已經寫了一些jQuery代碼爲：

$('#hovervideo').mouseenter(function(){ 
    var isviddiv = $(this).find('.video-thumb'); 
    if(isviddiv.length){ 
     isviddiv.css('display','block'); 
    } 
     console.log(isviddiv.length); 
}); 
$('#hovervideo').mouseleave(function(){ 
    var isviddiv = $(this).find('.video-thumb'); 
    if(isviddiv.length){ 
     isviddiv.css('display','none'); 
    } 
     console.log(isviddiv.length); 
});

的Html

部分

<h1 class="productvideo" id="hovervideo"><a href="#"><img src="images/tst-img.jpg" alt="" /></a> 
       <span class="video-thumb"></span> 
       </h1>

，但它只會工作一個圖像。 bcoz的id「hovervideo」對於所有的H1都是一樣的。但我希望它在所有的圖像懸停效果。

任何人都可以告訴我該怎麼做。

感謝

來源

2011-09-28 Pathik Gandhi

，而不是使用類選擇，類「測試圖像」添加到所有圖像像這樣：

<h1 class="productvideo" id="hovervideo"><a href="#"><img src="images/tst-img.jpg" class="test-image" alt="" /></a> 
       <span class="video-thumb"></span> 
       </h1>

然後更改腳本使用類選擇

$('.test-image').mouseenter(function(){ 
    var isviddiv = $(this).find('.video-thumb'); 
    if(isviddiv.length){ 
     isviddiv.css('display','block'); 
    } 
     console.log(isviddiv.length); 
}); 
$('.test-image').mouseleave(function(){ 
    var isviddiv = $(this).find('.video-thumb'); 
    if(isviddiv.length){ 
     isviddiv.css('display','none'); 
    } 
     console.log(isviddiv.length); 
});

來源

2011-09-28 12:27:40

偉大它完美 –

由於可能的時候可以接受的答案 –

您不能有多個具有相同ID的元素。 Id應該是唯一的標識符。如果你希望事件被綁定到多個元素，只需通過類選擇它們：

$('.productvideo')...

來源

2011-09-28 12:28:56 mamoo

將圖像懸停在圖像上時jQuery中的問題？

回答

相關問題