mouseout

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

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

Кратко

Секция статьи "Кратко"

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

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

Как пишется

Секция статьи "Как пишется"
        
          
          const divEl = document.getElementsByTagName('div')[0]divEl.addEventListener('mouseout', function () {  console.log('курсор вышел за границы элемента!')})
          const divEl = document.getElementsByTagName('div')[0]
divEl.addEventListener('mouseout', function () {
  console.log('курсор вышел за границы элемента!')
})

        
        
          
        
      

Как понять

Секция статьи "Как понять"

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

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

        
          
          const figure = document.querySelector('.figure')const text = document.querySelector('.text')figure.addEventListener('mouseout', function() {  let currentColor = getColor()  figure.style.backgroundColor = currentColor  text.style.color = currentColor})function getColor() {  const colors = ['#41E847', '#286C2D', '#2E9AFF', '#123E66', '#F498AD', '#623D45', '#FF8630', '#663613', '#FFD829', '#665610']  return colors[Math.floor(Math.random() * colors.length)]}
          const figure = document.querySelector('.figure')
const text = document.querySelector('.text')

figure.addEventListener('mouseout', function() {
  let currentColor = getColor()
  figure.style.backgroundColor = currentColor
  text.style.color = currentColor
})

function getColor() {
  const colors = ['#41E847', '#286C2D', '#2E9AFF', '#123E66', '#F498AD', '#623D45', '#FF8630', '#663613', '#FFD829', '#665610']
  return colors[Math.floor(Math.random() * colors.length)]
}

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

На практике

Секция статьи "На практике"

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

Секция статьи "Николай Лопин советует"

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

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