CSS : hover Selector
Voorbeeld
Kies en styl 'n skakel wanneer jy daaroor beweeg:
a:hover
{
background-color: yellow;
}
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die :hover
kieser word gebruik om elemente te kies wanneer jy oor hulle beweeg.
Wenk: Die :hover-kieser kan op alle elemente gebruik word, nie net op skakels nie.
Wenk: Gebruik die :skakel -kieser om skakels na onbesoekte bladsye te styl, die :besoek -kieser om skakels na besoekte bladsye te styl, en die :active -kieser om die aktiewe skakel te stileer.
Let wel: :hover MOET ná :link en :visited kom (as dit teenwoordig is) in die CSS-definisie, om effektief te wees!
Weergawe: | CSS1 |
---|
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die kieser ten volle ondersteun.
Selector | |||||
---|---|---|---|---|---|
:hover | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
Let wel: In IE moet daar 'n <!DOCTYPE> verklaar word vir die :hover keurder om op ander elemente as die <a> element te werk.
CSS-sintaksis
:hover {
css declarations;
}
Meer voorbeelde
Voorbeeld
Kies en styl 'n <p>-, <h1>- en <a>-element wanneer jy daaroor beweeg:
p:hover, h1:hover, a:hover {
background-color: yellow;
}
Voorbeeld
Kies en styl onbesoekte, besoekte, sweef- en aktiewe skakels:
/* unvisited link */
a:link {
color: green;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: red;
}
/* selected link */
a:active {
color: yellow;
}
Voorbeeld
Styl skakels met verskillende style:
a.ex1:hover, a.ex1:active {
color: red;
}
a.ex2:hover, a.ex2:active {
font-size: 150%;
}
Voorbeeld
Beweeg oor 'n <span>-element om 'n <div>-element te wys (soos 'n nutswenk):
div {
display: none;
}
span:hover + div {
display: block;
}
Voorbeeld
Wys en versteek 'n "aftreklys"-kieslys wanneer jy met die muis beweeg:
ul {
display: inline;
margin: 0;
padding: 0;
}
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
position: absolute;
width: 200px;
display: none;
}
ul li ul li {
background: #555;
display: block;
}
ul li ul li a {display:block !important;}
ul li ul li:hover {background: #666;}
Verwante bladsye
CSS-tutoriaal: CSS-skakels
CSS handleiding: CSS Pseudo klasse