将图像悬停在图像上时jQuery中的问题?

时间:2011-09-28 12:25:09

标签: jquery image hover

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

我为此编写了一些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 Part

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

但它只适用于一张图片。对于所有H1,id“hovervideo”都是相同的。但我希望它在所有图像悬停效果。

任何人都可以建议我做什么。

由于

2 个答案:

答案 0 :(得分:3)

使用类选择器,将类“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);
});

答案 1 :(得分:1)

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

$('.productvideo')...