Событие onmouseover

span.imgswap span.imgswap:hover img

Источник

Событие onmouseover

Событие onmouseover срабатывает, когда курсор мыши наводится на элемент, к которому добавлен атрибут onmouseover . Это один из самых популярных атрибутов, применяемый для создания различных эффектов с изображениями и другими объектами веб-страницы. Обычно работает в связке с событием onmouseout .

Синтаксис

Значения

Значение по умолчанию

Применяется к тегам

Пример

В данном примере при наведении курсора на изображение оно заменяется на другое, что создает эффект превращения черно-белой картинки в цветную (рис. 1).

Рис. 1. Использование события onmouseover

Браузеры

Internet Explorer до версии 7.0 содержит ошибку при работе с изображениями, события onmouseover и onmouseout для тега не обрабатываются.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Источник

Element: mouseover event

The mouseover event is fired at an Element when a pointing device (such as a mouse or trackpad) is used to move the cursor onto the element or one of its child elements.

Syntax

Use the event name in methods like addEventListener() , or set an event handler property.

addEventListener("mouseover", (event) => >); onmouseover = (event) => >; 

Event type

Event properties

This interface also inherits properties of its parents, UIEvent and Event . MouseEvent.altKey Read only Returns true if the alt key was down when the mouse event was fired. MouseEvent.button Read only The button number that was pressed (if applicable) when the mouse event was fired. MouseEvent.buttons Read only The buttons being pressed (if any) when the mouse event was fired. MouseEvent.clientX Read only The X coordinate of the mouse pointer in local (DOM content) coordinates. MouseEvent.clientY Read only The Y coordinate of the mouse pointer in local (DOM content) coordinates. MouseEvent.ctrlKey Read only Returns true if the control key was down when the mouse event was fired. MouseEvent.layerX Non-standard Read only Returns the horizontal coordinate of the event relative to the current layer. MouseEvent.layerY Non-standard Read only Returns the vertical coordinate of the event relative to the current layer. MouseEvent.metaKey Read only Returns true if the meta key was down when the mouse event was fired. MouseEvent.movementX Read only The X coordinate of the mouse pointer relative to the position of the last mousemove event. MouseEvent.movementY Read only The Y coordinate of the mouse pointer relative to the position of the last mousemove event. MouseEvent.offsetX Read only The X coordinate of the mouse pointer relative to the position of the padding edge of the target node. MouseEvent.offsetY Read only The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node. MouseEvent.pageX Read only The X coordinate of the mouse pointer relative to the whole document. MouseEvent.pageY Read only The Y coordinate of the mouse pointer relative to the whole document. MouseEvent.relatedTarget Read only The secondary target for the event, if there is one. MouseEvent.screenX Read only The X coordinate of the mouse pointer in global (screen) coordinates. MouseEvent.screenY Read only The Y coordinate of the mouse pointer in global (screen) coordinates. MouseEvent.shiftKey Read only Returns true if the shift key was down when the mouse event was fired. MouseEvent.mozInputSource Non-standard Read only The type of device that generated the event (one of the MOZ_SOURCE_* constants). This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event). MouseEvent.webkitForce Non-standard Read only The amount of pressure applied when clicking. MouseEvent.x Read only Alias for MouseEvent.clientX . MouseEvent.y Read only Alias for MouseEvent.clientY .

Examples

HTML

ul id="test"> li>item 1li> li>item 2li> li>item 3li> ul> 

JavaScript

const test = document.getElementById("test"); // This handler will be executed only once when the cursor // moves over the unordered list test.addEventListener( "mouseenter", (event) =>  // highlight the mouseenter target event.target.style.color = "purple"; // reset the color after a short delay setTimeout(() =>  event.target.style.color = ""; >, 500); >, false, ); // This handler will be executed every time the cursor // is moved over a different list item test.addEventListener( "mouseover", (event) =>  // highlight the mouseover target event.target.style.color = "orange"; // reset the color after a short delay setTimeout(() =>  event.target.style.color = ""; >, 500); >, false, ); 

Result

Specifications

Источник

HTML onmouseover Event Attribute

Execute a JavaScript when moving the mouse pointer over an image:

Definition and Usage

The onmouseover attribute fires when the mouse pointer moves over an element.

Tip: The onmouseover attribute is often used together with the onmouseout attribute.

Browser Support

Syntax

Attribute Values

Technical Details

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

onmouseover (HTML element)

The onmouseover attribute is one of the most commonly used event attributes. It captures the moment that a cursor crosses the boundary of an element, moving from outside to inside the element to which the attribute is applied. It differs from the onmousemove attribute, which is used to detect movement within the element’s boundaries. Once the cursor is positioned over the element, the onmouseover event remains active until the cursor is moved beyond the element’s boundaries—an event that the onmouseout attribute would capture.

The onmouseover attribute is mostly used to render visual effects such as image swapping or color changes, and has been used in this way for almost as long as JavaScript has been around.

Note that this event attribute cannot be applied to the following elements:

Example

The example below shows a simple
image swap technique, whereby mousing over the image causes the image to
change to one that reveals a location on a map:

 
 onmouseover="this.src='map_location_revealed.gif';" onmouseout="this.src='map.gif';"/>Figures for February’s racing.
 

Value

This attribute has no fixed value. It’s up to the author to decide on the scripting that’s included here, be that a call to one or more defined functions, or a simple alert() statement.

Compatibility

Every browser listed supports this attribute. However, inline event handlers such as this should be avoided. In the same way that inline CSS styles are frowned upon but externally defined CSS styles are considered good practice, inline event handlers should be stripped out and replaced with events attached unobtrusively through the DOM.

Share This Article

Adam is SitePoint’s head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.

Источник