/ ↲
    Расширенный поиск

    JavaScript

    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-дерево, то таких событий может быть много. Это может привести к проблемам с производительностью.

    Читайте также