Как сделать правильно hover на jquery?

@hobart.rath 

Для создания эффекта hover на элементе при помощи jQuery, можно использовать методы .hover() или .mouseenter() и .mouseleave().

Метод .hover() позволяет передать две функции, которые будут вызываться при наведении курсора и уходе с элемента соответственно:

1
2
3
4
5
6
7

$(document).ready(function() {
   $('#element').hover(function() {
      // Функция для hover
   }, function() {
      // Функция для ухода с элемента
   });
});

Методы .mouseenter() и .mouseleave() позволяют разделить эти две функции, что может быть полезным, если необходимо вызывать их отдельно:

1
2
3
4
5
6
7
8
9

$(document).ready(function() {
   $('#element').mouseenter(function() {
      // Функция для hover
   });
   
   $('#element').mouseleave(function() {
      // Функция для ухода с элемента
   });
});

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

1
2
3
4
5
6
7

$(document).ready(function() {
   $('#element').hover(function() {
      $(this).css('background-color', 'red');
   }, function() {
      $(this).css('background-color', 'white');
   });
});