23.5. fejezet: CSS alapismeretek – Pszeudó-osztályok
A pszeudó-osztályok használatának nincsenek kifejezett szabályai, de három példa is hozható:
- elem, amikor az egér fölötte van
- a meglátogatott és a meg nem látogatott linkek megkülönböztetése
- a fókuszban lévő elem megjelölése
Lássuk a fenti példákat pár kódrészlettel!
Alapvetően a pszeudó-osztály szintaxisa a következő:
selector:pseudo-class {
property:value;
}
Példa a linkekre:
/* meg nem látogatott link */
a:link {
color: #FF0000;
}
/* meglátogatott link */
a:visited {
color: #00FF00;
}
/* egér a link felett */
a:hover {
color: #FF00FF;
}
/* kiválasztott link */
a:active {
color: #0000FF;
}
A pszeudó-osztályok és a CSS-osztályok keverhetők is, például a következő link színt vált, ha az egér fölé kerül:
a.highlight:hover {
color: #ff0000;
}
A következő példa teljes HTML-kód lesz, melyben a háttérszín változik meg, ha a div elem fölé kerül az egér. (htmlpelda45.html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="hu">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
div {
background-color: green;
color: white;
padding: 25px;
text-align: center;
}
div:hover {
background-color: blue;
}
</style>
</head>
<body>
<p>Ha a div egység fölé kerül az egér, akkor megváltozik a háttérszín. </p>
<div>Ide húzza az egeret!</div>
</body>
</html>
A következő példa csak akkor látszik, ha egy megadott elem fölé kerül az egér.
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
A fejezet leghitelesebb forrása: https://www.w3schools.com/css/css_pseudo_classes.asp
(További példákkal.)