在CSS中,hover偽類選擇器用于為鼠標(biāo)懸停在元素上時(shí)的元素應(yīng)用樣式。以下是一些常見的hover用法:
a:hover {
color: red;
}
當(dāng)鼠標(biāo)懸停在鏈接上時(shí),鏈接的顏色會(huì)變?yōu)榧t色。
button:hover {
background-color: blue;
}
當(dāng)鼠標(biāo)懸停在按鈕上時(shí),按鈕的背景顏色會(huì)變?yōu)樗{(lán)色。
div:hover #hidden-element {
display: block;
}
當(dāng)鼠標(biāo)懸停在div元素上時(shí),會(huì)顯示ID為hidden-element的元素。
div:hover {
width: 200px;
height: 200px;
}
當(dāng)鼠標(biāo)懸停在div元素上時(shí),div的尺寸會(huì)變?yōu)?00px x 200px。
a:hover {
color: red;
transition: color 0.3s ease;
}
當(dāng)鼠標(biāo)懸停在鏈接上時(shí),鏈接的顏色會(huì)在0.3秒內(nèi)平滑地過渡到紅色。
a:hover, a:hover:after {
color: blue;
}
a:hover:after {
content: " (hover me)";
}
a:not(:hover):after {
content: "";
}
當(dāng)鼠標(biāo)懸停在鏈接上時(shí),鏈接的文字顏色會(huì)變?yōu)樗{(lán)色,并顯示" (hover me)“。當(dāng)鼠標(biāo)移出鏈接時(shí),文字顏色恢復(fù)為原色,同時(shí)” (hover me)"也會(huì)消失。
這些只是hover的一些基本用法,實(shí)際上hover可以與其他CSS屬性和選擇器結(jié)合使用,實(shí)現(xiàn)更豐富的交互效果。