html подія onmouseover
Подія onmouseover викликається, тоді, коли курсор миші наводиться на елемент з атрибутом onmouseover.
Це один з найпопулярніших атрибутів, застосовуваний для створення різних ефектів із зображеннями та іншими об'єктами веб-сторінки.
Зазвичай працює разом з подією [onmouseout](onmouseout)`.
Синтаксис
<element onmouseover="script">Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1+ | 1+ | 1+ | 4+ | 12+ | 7+ |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 1+ | 1+ | 1+ | 1+ |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML події onmouseover
<p>Для демонстрації атрибуту наведіть мишку на текст:</p>
<p onmouseover="this.style.color = 'red'">Хаскі — енергійні та спортивні. Вони зазвичай мають товсту подвійну шерсть, яка може бути сірою, чорною, мідно-червоною чи білою.</p>HTML
<p>Для демонстрації атрибуту наведіть курсор миші на зображення:</p>
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Boat" title="Boat" id="pic">JS
pic.onmouseover = function () {
this.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23e9c46a'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%23e76f51'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23264653'/%3E%3C/svg%3E";
this.alt = this.title = 'Zak';
};
pic.onmouseout = function () {
this.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E";
this.alt = this.title = 'Boat';
};
//# sourceURL=pen.jsКоментарі
Коментарів ще немає — будьте першим!