CSS 懸停的用法

2021-09-01 02:26:43 字數 749 閱讀 6842

在css樣式中的總定義:

.centerblock

.centerblock_left

.centerblock_right

.leftmenu>li>span

.leftmenu>li /*左選單欄裡的所有內容*/

.leftmenu>li>a /*li裡的所有a的變化*/

1.對左選單欄裡的li懸停

.leftmenu>li:hover     /*懸停li時,除a鏈結以外的內容會變化*/
如圖:對li懸停時,li中a鏈結的顏色仍為灰色,而「/」顏色由灰變為橙色。說明a鏈結雖然在li裡,但li不能控制a鏈結裡的屬性,需另外設定

2.對li裡的單獨a鏈結懸停

.leftmenu>li>a:hover    /*懸停a時,每乙個a的變化*/
如圖:對li裡的a鏈結進行懸停時,加入了下劃線,其餘元素不發生改變。

3.對li裡的所有a鏈結懸停

.leftmenu>li:hover>a   /*懸停li時所有a均變化*/
如圖:設定字型顏色為橙,發現li裡所有元素,包括所有a鏈結的字型全部變為橙色。

CSS3懸停效果案例應用

css3 為 web 開發帶來了非常令人興奮的變化,特別是 css 3d 轉換 動畫等特性的支援,可以輕鬆的建立很酷的 web 效果。css3新增添了實現動畫效果的新功能,通過本文,你可以對這些新功能有個初步了解。今天就分享一些懸停效果,可以更好的幫助你開發 html標記 這個簡單的結構使我們能夠使...

CSS 按鈕懸停時改變其邊框和背景

今天在學習css3時,看到了乙個比較有趣的效果 按鈕有背景色,滑鼠懸停時,背景色變為白色,並且有和原來背景色一樣的邊框。在vscode上自己碼 時發現了問題 懸停時會影響的其他元素的位置,即按鈕之後的元素,會在滑鼠懸停在按鈕時,位置向下移動。經過檢查發現,因為我的按鈕邊框是在懸停效果時加的,在css...

CSS傾斜邊框 創意框邊框懸停效果

創意邊框title rel stylesheet href css style.css head class container class box class content 01h2 夜之城h3 驚魂 們的表現越來越狂暴 大街上充滿了癮君子們 他們為一種剛剛出現的娛樂項 目所沉迷 腦舞 腦舞十分...