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

Описание

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

Синтаксис

Селектор: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>

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

Свойство outline-offset

Устанавливает расстояние между рамкой, созданной с помощью свойства outline, и краем или границей...

Свойство padding

Устанавливает расстояние от внутреннего края рамки элемента до воображаемого прямоугольника.

Свойство grid-row-end

Определяет местоположение в сетке ссылаясь на конкретные линии. <br>grid-column-end / grid-...

Свойство box-decoration-break

Указывает, как оформлять фрагменты текста при его переносе на другую строку. Работает только для ...

Селекторы атрибутов со значениями в конце

Устанавливает стиль для элемента в том случае, если значение атрибута оканчивается указанным текс...