jQuery CSS при наведении мыши против наведения мыши
JavaScript
4 недели назад
от Talha Saif Malik
« jQuery » считается легкой библиотекой JavaScript, которая эффективно использует JavaScript. Он оборачивает несколько строк кода JavaScript для выполнения определенных функций на основе встроенных методов. Эти методы можно легко вызвать с помощью одной строки кода. Это уменьшает длину кода и эффективно выполняет желаемую задачу. « hover() » и « mouseover() » — это методы jQuery, которые пользователи могут вызывать с помощью одной строки кода для выполнения задачи при срабатывании связанных с ними событий.
В этом руководстве освещаются ключевые различия между методами CSS «hover()» и «mouseover()».
Что такое CSS-метод hover() в jQuery?
Метод CSS « hover() » поддерживает обработчики событий « mouseleave » и « mouseenter ». Событие «mouseenter» срабатывает, когда указатель мыши наводится на элемент, тогда как событие «mouseleave» происходит, когда пользователь удаляет указатель мыши с элемента.
Синтаксис
$(селектор).hover( handlerIn, handlerOut )
В приведенном выше синтаксисе:
handlerIn: Выполняет определяемую пользователем функцию при наведении указателя мыши над связанным элементом.
handlerOut: Выполняет определяемую пользователем функцию, когда указатель мыши удаляет фокус или из связанного элемента.
Пример 1. Применение метода CSS «hover()» в jQuery
В этом примере используется метод CSS « hover() », который связывает события «mouseenter» и «mouseleave» для изменения цвета элемента.
Код jQuery
Рассмотрим следующий код:
11.3/jquery.min.js ">
Это абзац.
В приведенном выше фрагменте кода:
Укажите “ css() » для изменения цвета целевого элемента при наведении на него курсора мыши.
Затем в качестве второго параметра метода определяется другая функция для изменения цвета элемента « p », когда курсор мыши покидает его.
Вывод
Как видно из вывода, указанный абзац меняет цвет в каждом случае, когда курсор мыши входит или выходит из него.
Что такое метод «mouseover()» в jQuery?
Метод « mouseover() » срабатывает, когда пользователь наводит указатель мыши на указанный элемент HTML. Обработчик события «mouseover» возникает, если пользователь вводит мышь, а затем выполняется метод «mouseover ()» для выполнения определенной задачи. Он также позволяет выполнять функцию JavaScript.
Синтаксис
$( селектор ).mouseover( обработчик)
В приведенном выше синтаксисе метод «mouseover()» поддерживает дополнительный параметр, который показывает функцию, которая выполняется при его вызове.
Пример 2. Применение метода CSS «mouseover()» в jQuery
В этом примере используется обсуждаемый метод для изменения цвета абзаца при срабатывании триггера события «mouseover»:
», который применяет « css() », чтобы изменить « цвет » целевого элемента «p», когда метод «mouseover ()» вызывается при наведении курсора на добавленный элемент «p».
Вывод
Вывод меняет цвет абзаца при наведении на него курсора мыши.
Основные различия между методами jQuery CSS «hover()» и «mouseover()»
Ключевые различия между CSS «hover» и «mouseover» перечислены ниже:
Обработчик событий
Метод CSS « hover() » поддерживает два обработчика событий « mouseenter » и « mouseleave », тогда как метод « mouseover() » поддерживает только один обработчик событий " наведение курсора ».
Функции (параметры)
Метод CSS «hover()» принимает максимум две функции в качестве аргумента. С другой стороны, метод «mouseover()» принимает максимум одну функцию в качестве аргумента.
Вложенные элементы
В методе «hover()», если курсор входит в дочерний элемент, вызывается событие «mouseenter», и событие «mouseleave», когда курсор уходит. Однако метод «mouseover()» вызывает внешнюю и внутреннюю части HTML-элемента по отдельности.
Использование
Метод «hover()» выполняется один раз для каждого элемента, тогда как метод «mouseover()» выполняется несколько раз для вложенных элементов.
Вывод
« CSS hover() » и « mouseover() » — это методы jQuery для выполнения специальных функций, основанных на их именах. Первый метод выполняет указанную задачу, когда срабатывает связанное с ним событие « mouseenter » или « mouseleave ».
Последний метод использует встроенное событие « mouseover », которое активируется, когда курсор мыши наводится на указанный элемент HTML. Это руководство продемонстрировало разницу между методами jQuery CSS «hover()» и «mouseover()».
Об авторе
Талха Саиф Малик
Талха является участником Linux Hint и стремится приносить пользу и делать полезные вещи для мира. Он любит читать, писать и говорить о Linux, данных, компьютерах и технологиях.
Посмотреть все сообщения
Более 100 плагинов jQuery Image Hover Effect с демонстрационным примером
22 ноября 2021 г.
|
Core Java Script
Atropos — это легкая, бесплатная библиотека JavaScript с открытым исходным кодом для создания потрясающих сенсорных 3D-эффектов параллакса при наведении.
Доступно для JavaScript, React и Vue.js
Подробнее
Демонстрация
18 ноября 2020 г.
|
Core Java Script
Макет встроенного меню с игривой анимацией при наведении курсора и панелью предварительного просмотра содержимого галереи.
Подробнее
Демонстрация
24 апреля 2020 г.
|
Анимация, CSS2 / CSS3.0
Простой эффект выделения в меню, основанный только на CSS, основанный на снимке Dribbble Франческо Загами. Он имеет действительно приятную анимацию выделения при наведении курсора на элемент меню (вам нужно подождать пару секунд, чтобы увидеть меню).
Подробнее
Демонстрация
13 марта 2020 г.
|
Анимация, CSS2 / CSS3.0
Простое воссоздание эффекта наведения масштаба фона, который можно увидеть на веб-сайте DDD Hotel, с использованием CSS clip-path. Идея состоит в том, чтобы уменьшить фоновое изображение и «подогнать» его под форму клипа, которая содержит то же фоновое изображение. Форма видна, потому что непрозрачность фона немного ниже.
Подробнее
Демонстрация
1 ноября 2019 г.
|
Анимация, Core Java Script
Узнайте, как создавать липкие эффекты при наведении курсора на изображения с помощью Three.js, используя шум в шейдере. Для самой демонстрации я создал более практичный пример, показывающий вертикальный прокручиваемый макет с изображениями, где каждое из них имеет вариацию эффекта.
Вы можете щелкнуть изображение, и оно увеличится до более крупной версии, в то время как появится некоторый другой контент (просто макет). Мы рассмотрим самые интересные части эффекта, чтобы вы поняли, как он работает и как создать свой собственный.
Подробнее
Демонстрация
21 августа 2019 г.
|
Плагины
Простой плагин jQuery, добавляющий превью изображений и видео к ссылкам и другим элементам.
Подробнее
Демонстрация
27 июня 2019 г.
|
Анимация, основной сценарий Java, видео и аудио
Freezeframe.js — это библиотека, которая приостанавливает анимированные файлы .gif и позволяет им анимироваться при наведении указателя мыши, щелчке мышью или событии касания или при ручном запуске.
Подробнее
Демонстрация
10 апреля 2019 г.|
Анимация, основной сценарий Java, слайдер
Воссоздание эффекта липкого изображения, который можно увидеть на веб-сайтах MakeReign и Ultranoir, с использованием three.js.
Событие «mouseenter» срабатывает, когда указатель мыши наводится на элемент, тогда как событие «mouseleave» происходит, когда пользователь удаляет указатель мыши с элемента.
