Pseudo-clase interactive
Aceste pseudo-clase stilizează elementele în funcție de modul în care utilizatorul interacționează cu ele.
Pseudo-clase folosite pe legături
Legăturile se bazează de obicei pe patru pseudo-clase: :link pentru legăturile nevizitate, :visited pentru cele vizitate, :hover pentru mausul aflat peste legătură și :active pentru o legătură activată.
Exemplu
Culoarea legăturii de aici depinde de starea ei.
Notă: Ca să funcționeze a:hover, TREBUIE să vină după a:link și a:visited în CSS. Ca să funcționeze a:active, TREBUIE să vină după a:hover. Majusculele nu contează în numele pseudo-claselor.
Rezultat: pagină HTML completă
<!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 pe <div>
Legăturile nu sunt singurele elemente care răspund la :hover; îl pot folosi și alte elemente.
Exemplu
Rezultat: pagină HTML completă
<!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 pe <input>
Un element care primește focus, de exemplu un câmp de introducere pe care utilizatorul dă clic sau la care ajunge cu tasta Tab, poate fi stilizat prin pseudo-clasa :focus.
Exemplu
Rezultat: pagină HTML completă
<!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>
Pseudo-clase și clase HTML
Este ușor să combini pseudo-clasele cu clasele HTML.
Exemplu
Aici :hover se aplică doar elementului <a> cu clasa „highlight”.
Rezultat: pagină HTML completă
<!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>
Tooltip simplu la hover
Un efect simplu de tooltip are nevoie doar de :hover: un element ascuns apare când utilizatorul trece cu mausul peste elementul părinte.
Exemplu
Când treci cu mausul peste un element <div>, apare un element <p>, ca un tooltip.
Rezultat: pagină HTML completă
<!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>