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