Проблемы в jQuery при наведении изображения на изображение? - PullRequest
Новая
       41

Проблемы в jQuery при наведении изображения на изображение?

0 голосов
/ 28 сентября 2011

У меня есть страница с перечнем изображений. И когда я наведу курсор на это изображение, на нем появится значок воспроизведения.

Я написал код 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 идентификатор "hovervideo" одинаков для всех H1. но я хочу это во всех эффектах наведения изображения.

Может кто-нибудь подсказать мне, что делать.

Спасибо

Ответы [ 2 ]

3 голосов
/ 28 сентября 2011

Вместо этого используйте селектор класса, добавьте класс "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 голос
/ 28 сентября 2011

Вы не можете иметь более одного элемента с одинаковым идентификатором.Идентификатор должен быть уникальным идентификатором.Если вы хотите, чтобы событие было привязано к нескольким элементам, просто выберите их по классу: 

$('.productvideo')...
...