Указатель мыши на элементе

Событие mouseover возникает, когда указатель мыши оказвается на элементе. Событие mouseout срабатывает, когда указатель уходит с элемента. Возможна ситуация, когда пользователь быстро проводит указатель над маленьким элементом, и скрипт не успевает это отследить. Поэтому нет полной гарантии, что эти события сработают. Хотя, это редко может быть какой-то проблемой, просто это нужно учитывать.

Также существуют события mouseenter и mouseleave, которые тоже отслеживают заход указателя на элемент и выход с него. Но в работе этих событий есть важное отличие. Если указатель мыши зашёл на элемент, а затем зашёл на вложенный в него элемент, то события mouseover и mouseout считают, что указатель ушёл с внешнего элемента на вложенный. Более того, существует всплытие событий, оно рассмотрено в другой теме. Из-за всплытия, событие сработавшее на вложенном элементе передаётся и внешнему элементу. Поэтому, когда указатель переходит на вложенный элемент, то для внешнего элемента срабатывает mouseout и тут же mouseover. Пока это будет для Вас не совсем понятно, но когда Вы изучите всплытие событий, то Вы разберётесь, почему так получается.

События mouseenter и mouseleave не реагируют на переход указателя на вложенный элемент и полагают, что если указатель перешёл на вложенный элемент, то при этом он остаётся и на внешнем элементе.

Рассмотрим работу этих событий на примере. Создадим блоки - внешний и вложенный и поставим обработчики на оба блока:

Стиль:

div 
  {
  border: 1px solid Red;
  }

HTML код:

<div id="big" style="width: 150px; height: 80px;">
  <div id="smal" style="width: 70px; height: 60px;"></div>
</div>

JavaScript:

let big = document.getElementById('big');
let smal = document.getElementById('smal');

big.onmouseover = function() {
  console.log('Зашёл на большой');
  };

big.onmouseout = function() {
  console.log('Ушёл с большого');
  };

smal.onmouseover = function() {
  console.log('Зашёл на маленький');
  };

smal.onmouseout = function() {
  console.log('Ушёл с маленького');
  };

Запустите страницу, откройте консоль и установите указатель мыши сначала на внешний блок, затем на вложенный. Посмотрите, как срабатывают события. Обратите внимание, событие сработавшее на внутреннем блоке, срабатывает и на внешнем. Получается, что на внешнем блоке срабатывает mouseout и сразу mouseover. С выходом указателя с вложенного блока возникает такая же ситуация.

Из-за этой особенности рассмотренные события редко применяются для работы с большим внешним блоком. Они используются для делегирования событий или для элементов, у которых нет вложенных элементов.

Добавим на страницу такие же блоки и поставим на них обработчики других событий:

HTML код:

<div id="newbig" style="width: 150px; height: 80px; margin: 20px">
<div id="newsmal" style="width: 70px; height: 60px;"></div>
</div>

JavaScript:

let newBig = document.getElementById('newbig'); 
let newSmal = document.getElementById('newsmal');

newBig.onmouseenter = function() {
  console.log('Зашёл на большой');
  };

newBig.onmouseleave = function() {
  console.log('Ушёл с большого');
  };

newSmal.onmouseenter = function() {
  console.log('Зашёл на маленький');
  };

newSmal.onmouseleave = function() {
  console.log('Ушёл с маленького');
  };

Рассмотренные события работают по-разному. В зависимости от решаемой задачи, используются либо одни, либо другие. Кроме того, в CSS есть псевдокласс hover. Он позволяет изменить стиль элемента, на котором находится указатель мыши. Его желательно использовать всегда, когда это возможно. А в скриптах делать более сложные изменения страницы.