Стиль элемента при наведении на него курсора мыши

Описание

Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.

Синтаксис

Селектор:hover { ... }

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
#block-h {
width: 100px;
height: 100px;
background-color: rgb(217, 43, 226);
transition: width 0.6s ease-in-out;
}
#block-h:hover {
width: 200px;
}
</style>
<div id='block-h'></div>
</body>
</html>

Читайте также