mouseover

Реагируем, когда пользователь наводит курсор на элемент.

Время чтения: меньше 5 мин

Кратко

Скопировано

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

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

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

Как пишется

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

        
        
          
        
      

Как понять

Скопировано

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

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

        
          
          let current = undefinedfunction onMouseover() {  if (current) {    current.classList.remove('mouseover')  }  this.classList.add('mouseover')  current = this  // Записываем текущий пункт,  // чтобы удалить с него класс  // при переходе курсора на новый элемент}const items = document.getElementsByTagName('li')for (let i = 0; i < items.length; ++i) {  const item = items[i]  item.addEventListener('mouseover', onMouseover)}
          let current = undefined

function onMouseover() {
  if (current) {
    current.classList.remove('mouseover')
  }
  this.classList.add('mouseover')
  current = this
  // Записываем текущий пункт,
  // чтобы удалить с него класс
  // при переходе курсора на новый элемент
}

const items = document.getElementsByTagName('li')
for (let i = 0; i < items.length; ++i) {
  const item = items[i]
  item.addEventListener('mouseover', onMouseover)
}

        
        
          
        
      
Открыть демо в новой вкладке

На практике

Скопировано

Николай Лопин советует

Скопировано

🛠 С помощью пары событий mouseover и mouseout можно делать выпадающие списки и меню. Но у таких меню могут быть проблемы с доступностью.

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