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

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

Пример использования псевдокласса :hover для изменения цвета текста при наведении на него мыши:

 
    .element {
        color: black; /* Цвет текста по умолчанию */
    }
 
    .element:hover {
        color: red; /* Цвет текста при наведении на элемент */
    }
 
 
<p class="element">Наведите на этот текст мышь</p>

В данном примере при наведении на элемент с классом "element" цвет текста изменится на красный.

Также можно использовать псевдокласс :hover для анимации элемента при наведении. Например, изменить размер или фон элемента:

 
    .element {
        width: 100px;
        height: 100px;
        background-color: blue; /* Фон элемента по умолчанию */
        transition: all 0.3s; /* Анимация изменений при наведении */
    }
 
    .element:hover {
        width: 150px;
        height: 150px;
        background-color: green; /* Новый фон при наведении */
    }
 
 
<div class="element"></div>

В этом примере при наведении на элемент его размер увеличится, а цвет фона изменится с синего на зеленый с анимацией за 0.3 секунды.

Таким образом, псевдокласс :hover в CSS позволяет создавать интерактивные эффекты при взаимодействии пользователя с элементами веб-страницы.