html подія onmouseout
Подія onmouseout спрацьовує, коли курсор миші виходить за межі елемента, до якого додано параметр (атрибут) onmouseout.
Ця подія зазвичай працює у зв'язці з подією [onmouseover](onmouseover).
Синтаксис
<element onmouseout="script">Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1.0+ | 1.0+ | 1.0+ | 4.0+ | 12+ | 7.0+ |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 1+ | 1+ | 1+ | 1+ |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML події onmouseout
<p>Для демонстрації атрибуту наведіть курсор миші на текст і заберіть:</p>
<p onmouseover="this.style.color = 'yellow'" onmouseout="this.style.color = ''">Хаскі — енергійні та спортивні. Вони зазвичай мають товсту подвійну шерсть, яка може бути сірою, чорною, мідно-червоною чи білою. Така шерсть захищає в морозну погоду від переохолодження. Їхні очі зазвичай світло-блакитні, хоча вони також можуть бути коричневими, зеленими, синіми, жовтими чи гетерохромними. </p>HTML
<h3>Приклад використання атрибуту onmouseout </h3>
<p>Для демонстрації атрибута переміщайте курсор миші над картинкою</p>
<p><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' 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=""
onmouseout="resize(this, 200, 200)" onmouseover="resize(this, 300, 300)"></p>JS
function resize(img, x, y) {
img.width = x;
img.height = y;
}
//# sourceURL=pen.jsHTML
<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='%238a4b0f'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%23c96f1e'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23f4a259'/%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Коментарі
Коментарів ще немає — будьте першим!