Target Один элемент с тем же именем класса, что и несколько элементов

0

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

$(".thumb-overlay-content").hover(function() {
    $(this).parent('.thumb-overlay-desc').removeClass('animated rotateOut');
    $(this).parent('.thumb-overlay-desc').addClass('animated rotateIn');
}, function() {
    $(this).parent('.thumb-overlay-desc').removeClass('animated rotateIn');
    $(this).parent('.thumb-overlay-desc').addClass('animated rotateOut');
});

благодаря

  • 0
    Вам нужен способ выбрать этот конкретный элемент ... дать ему другой класс, идентификатор, может быть, выбрать его по индексу ...
  • 1
    Есть причина, по которой вы не можете использовать только CSS для этого: .thumb-overlay-content:hover
Показать ещё 1 комментарий
Теги:
hover

4 ответа

1

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

$(".thumb-overlay-content").hover(function() {
    $(this).removeClass('rotateOut').addClass('rotateIn');
}, function() {
    $(this).removeClass('rotateIn').addClass('rotateOut');
});

Также нет необходимости удалять .animated класс, если вы просто собираетесь его снова добавить.

См. Рабочий jsfiddle

На стороне нет, я не уверен, что jquery необходим, если вы настроите свой CSS, все это может быть выполнено с помощью простого .thumb-overlay-content:hover

  • 0
    Вы также можете быть более конкретны с вашими классами, так что вы можете просто использовать toggleClass добавить / удалить один класс, чтобы получить тот же эффект
0

Вы должны использовать идентификатор или более точный запрос в вашем jQuery.

Добавьте атрибут id к вашему объекту и:

$("#myIdName").hover(function() {
    $(this).parent('.thumb-overlay-desc').removeClass('animated rotateOut');
    $(this).parent('.thumb-overlay-desc').addClass('animated rotateIn');
}, function() {
    $(this).parent('.thumb-overlay-desc').removeClass('animated rotateIn');
    $(this).parent('.thumb-overlay-desc').addClass('animated rotateOut');
});

Взгляните на jquery selecto r, чтобы построить более точный запрос

  • 0
    И прикованные звонки / кеширование.
0

Я не совсем уверен в вашем контексте, но вы должны просто удалить '.thumb-overlay-desc' из функции parent().

Я также не совсем уверен в вашей проблеме, это поможет увидеть ее в действии. Но попробуйте следующее:

$(".thumb-overlay-content").hover(function() {
    $(this).parent().removeClass('animated rotateOut').addClass('animated rotateIn');
}, function() {
    $(this).parent().removeClass('animated rotateIn').addClass('animated rotateOut');
});

Я также объединил removeClass() и addClass() в одну строку, потому что нет необходимости повторно идентифицировать селектор, при этом jQuery вы можете выполнять функции стека.

0

Немного больше контекста было бы полезно, но вы попробовали toggleClass?

$(".thumb-overlay-content").hover(function() {
    $(this).parent('.thumb-overlay-desc').toggleClass('rotateIn rotateOut');
}, function() {
    $(this).parent('.thumb-overlay-desc').toggleClass('rotateIn rotateOut');
});

Btw, $ (this) уже нацелен на инициирующий элемент, другие элементы с тем же именем класса не должны быть изменены.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню