Problems in jQuery when hovering an image over the image?
I have a page listing the images. And when I hover on that image it will display the play icon over the image.
I have written some jQuery code for that:
$('#hovervideo').mouseenter(function (){
var开发者_如何学C 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>
but it will work only for one image. bcoz the id "hovervideo" is same for all the H1. but i want it in all the image hover effect.
Can any one suggest me what to do.
Thanks
Use the class selector instead, add the class "test-image" to all images as so:
<h1 class="productvideo" id="hovervideo"><a href="#"><img src="images/tst-img.jpg" class="test-image" alt="" /></a>
<span class="video-thumb"></span>
</h1>
Then change the script to use the class selector
$('.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);
});
You cannot have more than one element with the same ID. Id should be a unique identifier. If you want the event to be bound to multiple elements, simply select them by class:
$('.productvideo')...
精彩评论