将图像悬停在图像上时jQuery中的问题？答案

【问题标题】：Problems in jQuery when hovering an image over the image?将图像悬停在图像上时jQuery中的问题？
【发布时间】：2026-02-09 13:55:01
【问题描述】：

我有一个列出图片的页面。当我将鼠标悬停在该图像上时，它会在图像上显示播放图标。

我为此编写了一些 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 都是相同的。但我希望它在所有图像悬停效果中。

谁能给我建议。

谢谢

【问题讨论】：

标签： jquery image hover

【解决方案1】：

改用类选择器，将“test-image”类添加到所有图像中：

<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);
});

【讨论】：

【解决方案2】：

您不能拥有多个具有相同 ID 的元素。 Id 应该是一个唯一标识符。如果您希望事件绑定到多个元素，只需按类选择它们：

$('.productvideo')...

【讨论】：