Как сделать removeclass при mouseleave?

Question

[Alexander Mischuk]

В общем, такая разметка.

<div class="parent">
   <div class="column"></div>
   <div class="column sub" style="display:none"></div>
</div>

Img это блок в первом column. При наведении появляется рядом второй column с классом sub, а родителю добавляет класс hover.
Понимаю, что нужно отталкиваться от того, что нужно убирать класс hover, когда курсор покидает область этого самого hover, но всё как-то мимо. В какую сторону смотреть?

$("img").hover(function () {	   
   $(this).parent().closest('.parent').addClass('hover');
});

jsfiddle.net/zD9NN

Answer 1

[Илья Лесных]

$('.hover').on('mouseleave', function(){
    $(this).removeClass('hover');
});

Это? Или я задачу не понял.

PS:

// не надо так
// $(this).parent().closest('.parent').addClass('hover');
// вот так можно
$(this).parents('.parent').addClass('hover');

Comments

[Alexander Mischuk]

Не срабатывает, вот фиддл сделал jsfiddle.net/zD9NN

[Илья Лесных]

@Mischuk потому что вы воспользовались сокращенной формой метода hover.

[Илья Лесных]

@Mischuk если нужно чтобы класс убирался при покидании мышкой квадратика img, то делается это так: jsfiddle.net/Aliance/zD9NN/3

[Илья Лесных]

@Mischuk если же нужно убирать класс когда курсов покидает всю область - то так: jsfiddle.net/Aliance/zD9NN/6

[Alexander Mischuk]

Да, спасибо, понял в чем проблема была.

Answer 2

[maddog670]

jsfiddle.net/zD9NN/2

$(".img").hover(function () {
    $(this).parent().closest('.parent').addClass('hover');
});

$('.parent').on('mouseleave', function () {
    $(this).removeClass('hover');
});

Answer 3

[GM2mars]

$(".img").on("mouseenter", function() {
    $(this).parents(".parent").addClass("hover");
});

$(".img").on("mouseleave", function() {
    $(this).parents(".parent").removeClass("hover");
});

Comments

[Илья Лесных]

ваш код можно сократить через shortcut вида $('.img').hover(callback1, callback2);

[GM2mars]

Я так пробовал, что то не заработало (О_о) :
$('.img').on("hover", function() { ... }, function() { ... });

[Илья Лесных]

@GM2mars это не событие, это именно шорткат) так что формат именно как я написал. впрочем, в документации все описано.

[GM2mars]

Соответственно он не будет работать с динамически добавленными элементами?

[Илья Лесных]

@GM2mars судя по всему. хотя я не вдавался в тонкости, но мне видится это багом(

[Илья Лесных]

Что странно. В 1.11.1 и 2.1.1 код выглядит следующим образом:

hover: function( fnOver, fnOut ) {
	return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
}

По сути - должен работать как .live() в ранних версиях.