Как подружить селекторы jQuery?

Question

[Никита Коновалов]

На странице есть 10 объектов с классом .flex-item
Хочется присваивать класс лишь тому объекту на который сейчас навели курсор.
Мой код на codepen
Спасибо за советы и решения

Answer 1

[Danil Namaste]

$('.flex-item').live("mouseover", function () {
  $(this).addClass('hover');
});


$('.flex-item').live("mouseleave", function () {
  $(this).removeClass('hover'); 
});

Comments

[Никита Коновалов]

Спасибо. Если сделать так, то перестанет работать mouseenter.
Покажите пожалуйста более развернутый код.

[Никита Коновалов]

Простите, по прежнему не понимаю. Я сделал пример на codepen. Можете показать на нем? codepen.io/n_konovalov/pen/rjKYPN

Нужно чтобы по ховеру через таймаут добавлялся класс к объекту на котором наведен курсор.
Если курсор увели до того как истек таймаут, то класс не добавляется.

[Danil Namaste]

на сss проще было бы)
transition-delay: 0.5s;

[Никита Коновалов]

Данил Загорский: спасибо за идею, но все равно случается какая-то ошибка "Uncaught typeerror:$(...).live is not a function"

[Никита Коновалов]

Данил Загорский: разобрался

$('.flex-item').on('mouseover', function() {
  $(this).addClass('hover');
});

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

[Dark Hole]

Данил Загорский: .live и .die obsolete

[Danil Namaste]

Dark Hole: аа ну да, .die

Answer 2

[Никита Коновалов]

Спасибо Данил Загорский — на основе его кода нашел решение

$('.flex-item').on('mouseover', function() {
  $(this).addClass('hover');
});

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

и в css
transition-delay: 0.5s;

Comments

[Danil Namaste]

Я рад, что помогло))