Интерактивные псевдоклассы
Эти псевдоклассы стилизуют элементы в зависимости от того, как пользователь с ними взаимодействует.
Псевдоклассы, используемые для ссылок
Для ссылок обычно используются четыре псевдокласса: :link для непосещённых ссылок, :visited для посещённых, :hover для мыши над ссылкой и :active для активированной ссылки.
Пример
Цвет ссылки здесь зависит от её состояния.
Примечание: Чтобы a:hover работал, он ДОЛЖЕН идти после a:link и a:visited в CSS. Чтобы a:active работал, он ДОЛЖЕН идти после a:hover. Регистр в названиях псевдоклассов не имеет значения.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link Pseudo-classes</title>
<style>
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
</style>
</head>
<body>
<h2>Styling Links with Pseudo-classes</h2>
<p><a href="https://prompt-cookbook.com">This is a link</a></p>
<p><strong>Note:</strong> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><strong>Note:</strong> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>
</body>
</html>
:hover на <div>
На :hover реагируют не только ссылки; его могут использовать и другие элементы.
Пример
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover on Div</title>
<style>
div {
background-color: green;
color: white;
padding: 25px;
text-align: center;
}
div:hover {
background-color: blue;
}
</style>
</head>
<body>
<h2>:hover on a div element</h2>
<div>Mouse Over Me</div>
</body>
</html>
:focus на <input>
Элемент, получающий фокус, например поле ввода, по которому пользователь щёлкает или к которому переходит клавишей Tab, можно стилизовать через псевдокласс :focus.
Пример
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Focus on Input</title>
<style>
input:focus {
background-color: yellow;
}
</style>
</head>
<body>
<h2>:focus on an input field</h2>
<form>
<label for="fname">First Name:</label><br>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last Name:</label><br>
<input type="text" id="lname" name="lname">
</form>
</body>
</html>
Псевдоклассы и классы HTML
Комбинировать псевдоклассы с классами HTML легко.
Пример
Здесь :hover применяется только к элементу <a> с классом «highlight».
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo-class with HTML Class</title>
<style>
a.highlight:hover {
color: #ff0000;
}
</style>
</head>
<body>
<h2>Pseudo-classes and HTML Classes</h2>
<p><a href="#">This is a regular link</a></p>
<p><a class="highlight" href="#">This link has the "highlight" class - hover over me!</a></p>
</body>
</html>
Простая подсказка при наведении
Для простого эффекта всплывающей подсказки достаточно :hover: скрытый элемент появляется, когда пользователь наводит курсор на его родительский элемент.
Пример
Элемент <p> появляется, как подсказка, при наведении курсора на элемент <div>.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Tooltip Hover</title>
<style>
p.tooltip {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p.tooltip {
display: block;
}
</style>
</head>
<body>
<h2>Simple Tooltip Hover</h2>
<div>Hover over me to show the p element.
<p class="tooltip">I am shown when you hover over the div!</p>
</div>
</body>
</html>