Jquery при наведении событие: Метод .hover() | jQuery справочник

Задания по jQuery — HTMLLab

Опубликовано 30.05.2016 от @altarasov — Оставить комментарий

jQuery введение. Задания

Основы jQuery

1.   Подключите jQuery, убедитесь в доступности объекта -библиотеки. Примечание: попробуйте подключение с разных CDN-хранилищ, и при помощи локального файла
2. Откройте верстку http://codepen.io/htmllab/pen/NNaGOV
   Выберите при помощи селекторов jQuery
   — все HTML-элементы strong и окрасьте их в зеленый цвет
   — найдите все HTML-элементы em и добавьте им класс .selected
   — Найдите все элементы mark, которые находятся в div с классом row и задайте им класс .selected
   — Найдите все гиперссылки и удалите у них подчеркивания
   — Найдите все HTML-элементы, который содержат слово «Задания» и находятся в элементе с классом .container
   — Переключите элементы strong с классом some в состояние без этого класса, а тем элементам (strong), у которых небыло этого класса — добавьте.
   — среди набора элементов с классом .row удалите класс у второго элемента
   — прочитайте CSS-свойство color у второй гиперсылки в тексте

Задания по работе с событиями в jQuery

События в jQuery

1. Создайте обработчик нажатия на кнопку, который будет менять цвет фона страницы.
2. Создайте HTML-форму и по нажатию на кнопку проверяйте заполненность всех полей. Если останутся незаполненные поля — выводите предупреждение и не отправляйте форму.
3. Создайте обработчик события на нажатие кнопок направлений (влево, вправо) так, чтобы HTML-элемент при однократном нажатии на кнопку анимированно сдвигался влево или вправо на 100px
4. Навесьте на событие движения мыши обработчик, который будет в консоль выводить координаты движения. Примечание: выводите их как x и y. Событие надо «повесить» на document
5. * Создайте эффект перетаскивания HTML-элементов с классом .drag. Примечание к задаче: напишите обработчики событий mousedown, mouseup и mousemove
6. Создайте модальное окно по аналогии с компонентом Bootstrap: http://getbootstrap.
   com/javascript/#modals
7. Создайте скрипт, реализующий игру Крестики-нолики http://htmllab.ru/krestiki-noliki/
8. Создайте эффект голосования, подобно тем, что есть в социальных сетях.
9. Создайте разметку с изображениями и элементами figure, figcaption. Сделайте figcaption невидимым. При наведении показывайте figcaption так, чтобы фон элемента был полупрозрачным, и занимал весь figure.

Анимация в jQuery. Задания

Анимация в jQuery

1. Создайте несколько параграфов с элементами strong и em. Задайте обработчики событий наведения мышью на эти элементы: при наведении, цвет элементов должен отличаться от обычного, а размер плавно увеличиваться.
2. * Создать метод у объекта jQuery — parabola(), который принимает аргументы a,b и c и анимирует элементы по параболе
3. * Создать метод у объекта jQuery — animationF(), который функцию, описывающей математическую формулу (Например, синуса или параболы) и анимирующей объект по этой траектории.
   4. При наведении на элемент с идентификатором #box, поворачивать элемент с классом .some на 90 градусов, при событии выведения мыши с элемента возвращать .some в исходную позицию
   5. Назначить обработчики событий для кнопок, такие, чтобы после нажатия на кнопку элемент должен двигаться на 100px в направлении, указанном кнопкой
   6. При нажатии на любую точку страницы, перемещать с анимацией этот элемент к нужному месту.
   7. Создать эффект переключатели (как в http://demos.jquerymobile.com/1.4.5/flipswitch/), только с использованием библиотеки jQuery (не применять jQueryUI)
   8. Для изображений создать обработчики событий, чтобы работа скрипта была похожа на работу слайдера
   
   9. Создать эффект лайтбокса средствами jQuery
   10. Создать эффект карусели
   11. Создать эффект галереи
   12*. Создать эффект аккордиона. Примечание: посмотреть пример аккордиона можно на сайте плагина jQueryUI https://jqueryui.com/accordion/
   13 * Создать плагин под названием jquery.calendar.js, который будет позволять выбирать дату из текстового однострочного поля с классом . calendar. Примечание: для успешного выполнения задания можно познакомиться с http://jqueryui.com/datepicker/.
   14. Выполните задания по JavaScript для работы с деревом документа DOM.

Рубрика: Курсы JavaScript

Событие при наведении мыши javascript

Использование событий onmouseover и onmouseout во многих случаях можно заменить CSS стилями, но иногда требуется на javascript отследить действие курсора над одним элементом и совершить в этот момент действие с другим другим объектом. Разберем на простых примерах как это реализовать.

• «onmouseover» — срабатывает при заходе курсора на элемент;
• «onmouseout» — срабатывает при уходе курсора с элемента.

Самое простое, это создать эти события внутри тега:

При наведении курсора на текст появляется блок, который может содержать любые элементы веб-сайта. Несмотря на то, что кода мало — он плохо воспринимается и работать с ним не удобно, поэтому отделим html-теги, javascript-функции и CSS-стили:

Количество строк увеличилось, но код стал лучше читаться и теперь править его проще.

События onmouseover и onmouseout в jQuery

Javascript это хорошо, но если в проекте используется библиотека jQuery, то стоит воспользоваться её возможностями для работы с событиями onmouseover и onmouseout. Перепишем предыдущий пример на jQuery.

не забудьте про CSS стили

Скрипт сократился за счет того, что одну функцию вешаем на оба события сразу. Так же, для вызова событий можно воспользоваться следующей конструкцией:

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

События mouseover/mouseout, relatedTarget

Событие mouseover происходит в момент, когда курсор оказывается над элементом, а событие mouseout – в момент, когда курсор уходит с элемента.

Эти события являются особенными, потому что у них имеется свойство relatedTarget . Оно «дополняет» target . Когда мышь переходит с одного элемента на другой, то один из них будет target , а другой relatedTarget .

Для события mouseover :

• event. target – это элемент, на который курсор перешёл.
• event.relatedTarget – это элемент, с которого курсор ушёл ( relatedTarget → target ).

Для события mouseout наоборот:

• event.target – это элемент, с которого курсор ушёл.
• event.relatedTarget – это элемент, на который курсор перешёл ( target → relatedTarget ).

В примере ниже каждое лицо и его черты – отдельные элементы. При движении указателя по этим элементам в текстовом поле отображаются происходящие события.

Каждое из них содержит информацию о target и relatedTarget :

Свойство relatedTarget может быть null .

Это нормально и означает, что указатель мыши перешёл не с другого элемента, а из-за пределов окна браузера. Или же, наоборот, ушёл за пределы окна.

Следует держать в уме такую возможность при использовании event.relatedTarget в своём коде. Если, например, написать event.relatedTarget.tagName , то при отсутствии event.relatedTarget будет ошибка.

Пропуск элементов

Событие mousemove происходит при движении мыши. Однако, это не означает, что указанное событие генерируется при прохождении каждого пикселя.

Браузер периодически проверяет позицию курсора и, заметив изменения, генерирует события mousemove .

Это означает, что если пользователь двигает мышкой очень быстро, то некоторые DOM-элементы могут быть пропущены:

Если курсор мыши передвинуть очень быстро с элемента #FROM на элемент #TO , как это показано выше, то лежащие между ними элементы

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

С другой стороны, мы должны иметь в виду, что указатель мыши не «посещает» все элементы на своём пути. Он может и «прыгать».

В частности, возможно, что указатель запрыгнет в середину страницы из-за пределов окна браузера. В этом случае значение relatedTarget будет null , так как курсор пришёл «из ниоткуда»:

Вы можете проверить это «вживую» на тестовом стенде ниже.

В его HTML есть два элемента,

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

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

Если указатель «официально» зашёл на элемент, то есть было событие mouseover , то при выходе с него обязательно будет mouseout .

Событие mouseout при переходе на потомка

Важная особенность события mouseout – оно генерируется в том числе, когда указатель переходит с элемента на его потомка.

То есть, визуально указатель всё ещё на элементе, но мы получим mouseout !

Это выглядит странно, но легко объясняется.

По логике браузера, курсор мыши может быть только над одним элементом в любой момент времени – над самым глубоко вложенным и верхним по z-index.

Таким образом, если курсор переходит на другой элемент (пусть даже дочерний), то он покидает предыдущий.

Обратите внимание на важную деталь.

Событие mouseover , происходящее на потомке, всплывает. Поэтому если на родительском элементе есть такой обработчик, то оно его вызовет.

Вы можете наглядно увидеть это в примере ниже:

При переходе мышью с внешнего элемента на внутренний, вы увидите сразу два события: mouseout [target: parent] (ушли с родителя) и mouseover [target: child] (перешли на потомка, событие всплыло).

При переходе с родителя элемента на потомка – на родителе сработают два обработчика: и mouseout и mouseover :

Если код внутри обработчиков не смотрит на target , то он подумает, что мышь ушла с элемента parent и вернулась на него обратно. Но это не так! Мышь никуда не уходила, она просто перешла на потомка.

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

Чтобы этого избежать, можно смотреть на relatedTarget и, если мышь всё ещё внутри элемента, то игнорировать такие события.

Или же можно использовать другие события: mouseenter и mouseleave , которые мы сейчас изучим, с ними такая проблема не возникает.

События mouseenter и mouseleave

События mouseenter/mouseleave похожи на mouseover/mouseout . Они тоже генерируются, когда курсор мыши переходит на элемент или покидает его.

Но есть и пара важных отличий:

1. Переходы внутри элемента, на его потомки и с них, не считаются.
2. События mouseenter/mouseleave не всплывают.

События mouseenter/mouseleave предельно просты и понятны.

Когда указатель появляется над элементом – генерируется mouseenter , причём не имеет значения, где именно указатель: на самом элементе или на его потомке.

Событие mouseleave происходит, когда курсор покидает элемент.

Вот тот же пример, что и выше, но на этот раз на верхнем элементе стоят обработчики mouseenter/mouseleave вместо mouseover/mouseout .

Как вы сами можете увидеть, генерируются только события, связанные с движением курсора относительно верхнего

Делегирование событий

События mouseenter/leave просты и легки в использовании. Но они не всплывают. Таким образом, мы не можем их делегировать.

Представьте ситуацию, когда мы хотим обрабатывать события, сгенерированные при движении курсора по ячейкам таблицы. И в таблице сотни ячеек.

Очевидное решение – определить обработчик на родительском элементе

и там обрабатывать возникающие события. Но, так как mouseenter/leave не всплывают, то если событие происходит на ячейке

, то только обработчик на

может поймать его.

Обработчики событий mouseenter/leave на

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

Что ж, не проблема – будем использовать mouseover/mouseout .

Начнём с простых обработчиков, которые выделяют текущий элемент под указателем мыши:

Вот они в действии. При переходе между элементами этой таблицы, текущий будет подсвечен:

В нашем случае мы хотим обрабатывать переходы именно между ячейками

: вход на ячейку и выход с неё. Прочие переходы, в частности, внутри ячейкиили вообще вне любых ячеек, нас не интересуют, хорошо бы их отфильтровать.

Можно достичь этого так:

Вот пример кода, учитывающего все ситуации:

Полный пример со всеми деталями:

Попробуйте подвигать курсор между ячейками и внутри них. Быстро или медленно – без разницы. В отличие от предыдущего примера выделяется только сама ячейка

.

Итого

Мы рассмотрели события mouseover , mouseout , mousemove , mouseenter и mouseleave .

Особенности, на которые стоит обратить внимание:

• При быстром движении мыши события не будут возникать на промежуточных элементах.
• События mouseover/out и mouseenter/leave имеют дополнительное свойство: relatedTarget . Оно дополняет свойство target и содержит ссылку на элемент, с/на который мы переходим.

События mouseover/out возникают, даже когда происходит переход с родительского элемента на потомка. С точки зрения браузера, курсор мыши может быть только над одним элементом в любой момент времени – над самым глубоко вложенным.

События mouseenter/leave в этом отличаются. Они генерируются, когда курсор переходит на элемент в целом или уходит с него. Также они не всплывают.

Задачи

Улучшенная подсказка

Напишите JavaScript код, который показывает подсказку над элементом с атрибутом data-tooltip . Значение атрибута должно становиться текстом подсказки.

Это похоже на задачу Поведение «подсказка», но здесь элементы с подсказками могут быть вложены друг в друга. Показываться должна подсказка на самом глубоко вложенном элементе.

Только одна подсказка может быть показана в любой момент времени.

Результат в iframe:

«Умная» подсказка

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

Другими словами, если пользователь подвинул курсор на элементе и остановился – показывать подсказку. А если он просто быстро провёл курсором по элементу, то не надо ничего показывать. Кому понравится лишнее мелькание?

Технически, мы можем измерять скорость прохода курсора мыши над элементом, и если она низкая, то можно посчитать, что пользователь остановил курсор над элементом, и показать ему подсказку. А если скорость высокая, то тогда не показывать.

Создайте для этого универсальный объект new HoverIntent(options) .

Его настройки options :

• elem – отслеживаемый элемент.
• over – функция, вызываемая, при заходе на элемент, считаем что заход – это когда курсор медленно двигается или остановился над элементом.
• out – функция, вызываемая при уходе курсора с элемента (если был заход).

Пример использования такого объекта для показа подсказки:

Если двигать кусор над «часами» быстро, то ничего не произойдёт, а если вы замедлите движение курсора над элементом или остановите его, то будет показана подсказка.

Обратите внимание: подсказка не должна пропадать (мигать), когда курсор переходит между дочерними элементами часов.

Алгоритм выглядит просто:

1. Назначаем обработчики onmouseover/out на элементе. Также можно было бы использовать onmouseenter/leave , но они менее универсальны и не сработают с делегированием.
2. Когда курсор переходит на элемент, начинаем измерять скорость его движения, используя mousemove .
3. Если скорость низкая, то вызываем over .
4. Когда мы выходим из элемента, если запускали over , вызываем out .

Но как измерить скорость?

Первая идея может быть такой: запускать нашу функцию каждые 100ms и находить разницу между прежними и текущими координатами курсора. Если она мала, то значит и скорость низкая.

К сожалению, в JavaScript нет возможности получать текущие координаты мыши. Не существует функции типа получитьТекущиеКоординатыМыши() .

Единственный путь – это слушать события мыши, например mousemove , и координаты брать из объекта события.

Так что поставим обработчик на mousemove , чтобы отслеживать координаты и запоминать их. И будем сравнивать результаты каждые 100ms .

Процесс обработки любого события — это создание какой-либо функции и добавление ее в качестве обработчика для конкретного элемента. Прочитать о способах обработки событий вы можете в статье «Обработка событий в JavaScript».

Пример обработчика события onmouseover как атрибута элемента

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

Наведи мышь, и текст покраснеет

Однако, это событие редко используется самостоятельно. Обычно оно «идет в паре» с обработкой события onmouseout, которое происходит , когда пользователь убирает указатель мыши с элемента или с одного из его дочерних элементов, т.е. выполняет действие, обратное для onmouseover. Посмотрим, как похожий пример будет выглядеть с обработкой 2-х событий:

Наведи мышь, и текст покраснеет, а потом почернеет снова

В примерах выше в обоих случаях было использовано ключевое слово this , которое указывает на объект, к которому применяется обработчик события. В нашем случае это был абзац с текстом.

Если задуматься о сути того, что было сделано, то мы просто сымитировали двумя обработчиками событий работу псевдокласса :hover :

Наведи мышь, и текст покраснеет, а потом почернеет снова

Данный пример говорит о том, что если обработку каких-то событий в JS можно заменить с помощью CSS-свойств, лучше отдать предпочтение стилям.

Обработка наведения/уведения курсора мыши для изображений

Рассмотрим пример посложнее. Предположим, на нужно заменить одно изображение другим. Просто так это в CSS или HTML не сделать, хотя можно использовать свойства background-image или свойство content:url() в псевдоэлементах ::before или ::after. Для тега это нужно будет сделать с помощью JavaScript:

Наведите курсор мыши на изображение, а затем уберите его

Пример обработки событий onmouseover и onmouseout с делегированием событий

В примере выше при наведении/уведении курсора мыши изображение меняется на другое и затем опять происходит возврат к отображению первой картинки. Мы усложним задачу и сделаем несложный вариант увеличения картинки в отдельном блоке при наведении курсора мыши на нее. Что-то подобное, но в более сложном варианте, предлагают обычно интернет-магазины одежды.

Для примера нам понадобится 2 div-а-контейнера:

1. для 4х небольших изображений, уменьшенных с помощью css-кода
2. для увеличенного изображения с абсолютным позиционированием

Ниже представлена разметка и CSS-стили.

Сам пример выглядит так:

Код на JavaScript:

Обратите внимание, что здесь использована обработка событий с помощью метода addEventListener . В этом случае вместо onmouseover ( onmouseout ) записывается только название, а не обработчик события — mouseover ( mouseout ).

Делегирование событий заключается в том, что мы не писали обработчики для каждого тега img , а задали всего один для их родительского элемента — div-a c . В функции же, которая обрабатывает действия пользователя, мы использовали строку var target = event. target для того, чтобы определить целевой объект события, т.е. тег img .

Также в коде мы учли, что между изображениями в div-e есть отступы, которые относятся к родительскому элементу, поэтому строка if (target.tagName != «IMG») проверяет, а является ли наш целевой объект тегом , и только в этом случае отображает увеличенное изображение. Вы можете самостоятельно отследить, для какого элемента наступает событие при наведении курсора мыши с помощью строки console.log(target.tagName) и консоли в браузере (ее вызывает клавиша F12), если откроете пример в новой вкладке.

На скриншоте представлена консоль в браузере Mozilla Firefox. Стрелками показаны места наведения указателя мыши.

Image -Zoom -JS — Google Suce

AllebilderVideosshoppingMapsNewsbücher

Sucoptionen

Как создать изображение Zoom — W3Schools

WWW.W3Schools.com ›Howto› Howto_JSAGE_ZO. Шаг 1) Добавьте HTML: Пример.