Псевдокласс hover
А сегодня мы будем рассматривать один из псевдоклассов, а именно псевдокласс hover. Данный псевдокласс является легким для изучения и понимания, а также он настолько часто используется в практике, что без него просто невозможно обойтись. Если задать данный псевдокласс элементу и навести на этом элемент курсор мыши, то будут применены css стили, которые были ему заданы. Другими словами, псевдокласс hover определяет стили элемента, если на него наведен курсор мыши. Если Вы не особо поняли, что это означает, то просто напишите у себя следующий код:
<html>
<head>
<title>Псевдокласс hover</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div>Блок</div>
</body>
</html>
Применяем css стили к тегу span:
div {
background: #0f0;
border: 2px solid #ccc;
width: 100px;
}
div:hover {
background: #00f;
border: 2px solid #f00;
width: 200px;
}
Теперь при наведении курсора мыши на блок, у него будет изменяться цвет фона, рамка, а также ширина, если курсор мыши с данного элемента мы убираем, то свойства остаются прежними, которые были заданы для блока div. Теперь делаем вывод о том, что псевдокласс :hover применяется к элементу только при наведении на него курсора мыши пользователем. Надеюсь, я полностью открыл Вам глаза, и Вы найдете применение данному псевдоклассу при создании своего сайта, ведь его можно применять к различным элементам на странице, придавая ей более изящный вид.
