skip to main content

Element.mouseover

js

Кратко 🔗

Событие на HTML элементе. Происходит, когда пользователь передвигает курсор на сам элемент или на вложенные элементы.

На события можно подписаться и выполнять JavaScript код, когда событие произошло.

Событие является противоположным событию mouseout. Эти события часто используются в паре.

Как пишется 🔗

let divEl = document.getElementsByTagName("div")[0]
divEl.addEventListener("mouseover", function () {
alert("курсор вошел в границы элемента!")
})

Как понять 🔗

Подробнее о механизме событий читай в статье «События».

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

See the Pen Событие mouseover by Nikolai Lopin (@Lopinopulos) on CodePen.

В работе 🔗

Николай,

🛠 С помощью этого события можно делать выпадающие списки и меню.

🛠 Есть очень похожее событие mouseenter, но оно не всплывает. Вместо этого для каждого элемента в цепочке вложенности (с самого вложенного элемента, на котором произошло событие до body) создается собственное событие. Если у тебя глубокое DOM-дерево, то таких событий может быть много. Это может привести к проблемам с производительностью.

Николай,