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 驚魂 們的表現越來越狂暴 大街上充滿了癮君子們 他們為一種剛剛出現的娛樂項 目所沉迷 腦舞 腦舞十分...