mouseover

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

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

На практике

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

nlopin

Секция статьи "nlopin"

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

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