Heim > Artikel > Web-Frontend > Eine kurze Einführung in die Verwendung des CSS:Hover-Selektors
Eine kurze Einführung in die Verwendung des CSS:Hover-Selektors
- 不言Original
- 2018-08-28 11:15:112633Durchsuche
Der Inhalt dieses Artikels ist eine kurze Einführung in die Verwendung des CSS:Hover-Selektors. Ich hoffe, dass er für Freunde hilfreich ist.
: Ein spezieller Stil, der durch Hover hinzugefügt wird, wenn die Maus über den Link bewegt wird.
Tipp: Der :hover-Selektor kann für alle Elemente verwendet werden, nicht nur für Links.
Tipp: Der :link-Selektor legt den Linkstil für nicht besuchte Seiten fest, der :visited-Selektor legt den Stil für besuchte Seitenlinks fest und der :active-Selektor legt den Linkstil fest, wenn Sie klicken darauf Stil.
Hinweis: Um den gewünschten Effekt zu erzielen, muss :hover nach :link und :visited in der CSS-Definition platziert werden! !
<style media="screen">
.pagination li {
line-height: 25px;
list-style-type:none;
}
.pagination a {
display: block;
color: #f2f2f2;
text-shadow: 1px 0 0 #101011;
padding: 0 10px;
border-radius: 2px;
box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
background: linear-gradient(top,#434345,#2f3032);
}
.pagination a:hover {
text-decoration: none;
box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
background: linear-gradient(top,#f48b03,#c87100);
}
</style>
<body>
<div class="pagination">
<ul>
<li><a href="#">Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
</body>Verwandte Empfehlungen:
CSS:hover selector_html/css_WEB-ITnose
CSS3-Selektorattributauswahlgerät
Das obige ist der detaillierte Inhalt vonEine kurze Einführung in die Verwendung des CSS:Hover-Selektors. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!