Событие onmouseover

Событие onmouseover срабатывает, когда пользователь наводит курсор мыши на элемент. Обычно события onmouseover и onmouseout применяются вместе.

Цитата из песочницы:

Событие onmouseover срабатывает, когда курсор мыши наводится на элемент, к которому добавлен атрибут onmouseover.

Хорошо, что это не так. Точнее не обязательно добавлять атрибут onmouseover к элементу, достаточно определить элемент как объект.

Реакция на курсор мыши событием onmouseover
Событие onmouseover реагирует на курсор мыши

Синтаксис

Для элемента HTML

<element onmouseover="OverFunction()">

Событие onmouseover добавляется к элементу HTML как атрибут.

редакторы WYSIWYG не сохраняют в содержании атрибут onmouseover.

В JavaScript для элемента как объект

object.attachEvent("onmouseover", OverFunction);

Применяется для старых версий IE < 9, работает как новый метод addEventListener.

object.onmouseover = function(){OverFunction};

Универсальный способ, который можно использовать везде.

object.addEventListener("mouseover", OverFunction);

Вызов события mouseover новым методом addEventListener.

Событие onmouseover/mouseover будет срабатывать постоянно пока курсор движется по элементу. Для одного раза применяется событие onmouseenter/mouseenter.

Примеры mouseover

Если к веб-странице подключены стили CSS, использовать событие mouseover как :hover для замены цвета или картинки — банально. Т.е. событие onmouseover/mouseover применяется там, где для элемента нет возможности применить стили CSS. Даже для всплывающей подсказки ToolTip хватает CSS.

Изменить текст после наведения курсора мыши.

<section data-mouseover>
  <h2>Навести курсор</h2>
</section>
<script>
var object = document.querySelector("[data-mouseover]");
    
object.addEventListener("mouseover", mouseOver);
 
function mouseOver()
	{
	 object.innerHTML="<h2>Событие mouseover</h2>"
	}
</script>

Заменить картинку поле наведения курсора мыши.

<img src="one.jpg" alt="">
<script>
var image = document.querySelector("img");
    
image.addEventListener("mouseover", mouseOver);
image.addEventListener("mouseout", mouseOut);
 
function mouseOver()
	{
	 image.src="two.png"
	}
function mouseOut()
	{
	 image.src="one.jpg"
	}
</script>