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

Описание

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

Синтаксис

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

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

Стиль для всего элемента, получающего фокус

Псевдокласс :focus-within определяет стиль для всего элемента, получающего фокус. Например, им мо...

Свойство color-scheme

Позволяет элементу указать, в каких цветовых схемах он может удобно отображаться.<br><br...

Свойство animation-name

Указывает имя запускаемой аниимации.

Свойство flex-basis

Определяет основу флекса, которая является начальным размером элемента. Похоже на свойства width ...

Свойство background-blend-mode

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