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');
});
благодаря
Вам нужно использовать функцию .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
toggleClass
добавить / удалить один класс, чтобы получить тот же эффект
Вы должны использовать идентификатор или более точный запрос в вашем 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, чтобы построить более точный запрос
Я не совсем уверен в вашем контексте, но вы должны просто удалить '.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 вы можете выполнять функции стека.
Немного больше контекста было бы полезно, но вы попробовали 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) уже нацелен на инициирующий элемент, другие элементы с тем же именем класса не должны быть изменены.
.thumb-overlay-content:hover