Как сделать правильно 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');
   });
});

@hobart.rath 

Приведенный пример кода демонстрирует как добавить эффект hover на элементе с использованием jQuery. При наведении курсора на элемент, его фон изменяется на красный, а при уходе с элемента фон становится белым.

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

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