CSS中hover是一個很重要的概念,它可以幫助我們在鼠標移動到一個元素上時改變該元素的屬性或者顯示一些內容。這個概念在實際開發中經常用到,下面我們來看下hover的用法。
/* 鼠標懸浮在a標簽上,修改文字顏色 */ a:hover { color: red; }
在上面的代碼中,我們使用了:hover偽類選擇器,將鼠標懸浮在a標簽上時,將字體顏色修改成了紅色。
/* 鼠標懸浮在圖片上,顯示一個遮罩層 */ img:hover::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
在上面的代碼中,我們使用了hover和::after偽類,將鼠標懸浮在圖片上時,為該圖片添加了一個遮罩層,使得圖片變暗。
/* 鼠標懸浮在ul的li上,修改背景色 */ ul li:hover { background-color: yellow; }
在上面的代碼中,我們使用了:hover偽類選擇器,將鼠標懸浮在ul中的li上時,修改了該li元素的背景色。
通過上面這些例子,我們可以看到,在CSS中,hover可以非常靈活地應用在各種元素中,讓我們的頁面更加生動有趣。