Как сделать так, чтобы функция jQuery .hover не влияла на все изображения одновременно?

Question

Я не уверен, что название объясняет это достаточно хорошо, но пытался сделать его довольно коротким!

Итак, у меня есть несколько изображений, разбросанных по странице, и я создал галерею лайтбоксов для них всех (.cboxElement - это класс, который его вызывает). Я хотел добавить к этому эффект наведения на каждое изображение, на которое влияет лайтбокс, чтобы пользователь знал, что его можно увеличить.

Проблема:

Я не написал оригинальный код для сайта, и это новая функция. Из-за несоответствий в классах между изображениями мне пришлось добавлять перед каждым изображением тег перед каждым изображением с уникальным классом, на который ссылается метод наведения, следующим образом:

    $("a.cboxElement").each(function(){
        $(this).prepend("<span class='zoom'></span>");
    });

Сразу после этого я использовал эффект наведения:

    $("a.cboxElement").hover(function(){
        $("a.cboxElement span").fadeIn('fast');
    },
    function(){
        $("a.cboxElement span").fadeOut('fast');
    });

Проблема в том, что, когда я наводю курсор мыши на изображение на странице, эффект наведения появляется на каждом изображении одновременно, и я не могу понять, как заставить его воздействовать только на изображение, над которым я нахожу курсор.

У кого-нибудь есть идеи относительно того, что я мог бы сделать?

Большое спасибо,

Jon

Answer 1

Я думаю, вам просто нужно изменить область вашего назначения при наведении:

$("a.cboxElement").hover(function(){
    $(this).find("span").fadeIn('fast');
},
function(){
    $(this).find("span").fadeOut('fast');
});

Ваш первоначальный код гласил: для каждого a.cboxElement найдите все a.cboxElement элементов 'span s иисчезать их в / из.Приведенный выше код говорит, что для каждого a.cboxElement при наведении найдите span для всего this a.cboxElement и затемните его в / из.

Answer 2

Также вы можете использовать .fadeToggle с одной функцией:

$("a.cboxElement").hover(function(){
    $(this).find("span").fadeToggle("fast");
});

Answer 3

$("a.cboxElement").hover(function(){
    $(this).find('span:first').fadeIn('fast');
},
function(){
    $(this).find('span:first').fadeOut('fast');
});

Answer 4

Назначьте атрибут id="..." каждому изображению и выберите его вместо всего класса a.cboxElement:

<img id="imageid1" ... >
$('#imageid1')....