Как установить для элемента поведение при наведении мыши при помощи псевдокласса?

Для установки поведения элемента при наведении мыши, в CSS можно использовать псевдокласс ":hover". Псевдокласс ":hover" применяется к элементу, когда курсор мыши находится над ним.

Чтобы установить различное поведение для элемента при наведении мыши, вам нужно указать значения для соответствующих свойств CSS внутри правила, которое использует псевдокласс ":hover".

Например, предположим, у нас есть HTML-элемент <div>:

<div id="my-element">Пример</div>

Чтобы изменить цвет фона элемента при наведении мыши, мы можем использовать следующий CSS-код:

#my-element:hover {
  background-color: red;
}

В данном примере, при наведении курсора мыши на элемент с идентификатором "my-element", его фоновый цвет будет изменяться на красный.

Вы также можете использовать псевдокласс ":hover" с другими свойствами CSS, чтобы изменить другие аспекты элемента при наведении мыши, например, его шрифт, текстовые эффекты, границы и т. д.

#my-element:hover {
  color: blue;
  text-decoration: underline;
  border: 1px solid black;
}

В этом примере, при наведении курсора мыши на элемент с идентификатором "my-element", его цвет текста будет меняться на синий, текст будет подчеркнут, а граница будет иметь черный цвет и толщину 1 пиксель.

Итак, использование псевдокласса ":hover" позволяет контролировать поведение элемента при наведении мыши, открывая большие возможности для создания интерактивных и динамичных веб-сайтов.