鼠標(biāo)懸浮覆蓋元素后，以前使用js的mouseover和mouseout添加監(jiān)聽(tīng)事件可以實(shí)現(xiàn)交互?，F(xiàn)在可以使用CSS中的:hover選擇器提高性能。:hover選擇器可以針對(duì)不同的HTML元素，在鼠標(biāo)懸停時(shí)改變?cè)兀ㄒ部梢允亲釉亍⑼?jí)元素、就近元素）的樣式，增強(qiáng)網(wǎng)頁(yè)的互動(dòng)性和用戶體驗(yàn)。

定義：

:hover 選擇器用于選擇鼠標(biāo)指針浮動(dòng)在上面的元素。

:hover 選擇器適用于所有元素

基礎(chǔ)用法：

這個(gè)表示的是：當(dāng)鼠標(biāo)懸浮在a這個(gè)樣式上的時(shí)候，a的背景顏色設(shè)置為黃色

a:hover

{

background-color:yellow;

}

這個(gè)是最普通的用法了，只是通過(guò)a改變了style

進(jìn)階用法:

使用a 控制其他塊的樣式：

使用a控制a的子元素 b：

.a:hover .b {

background-color:blue;

}

使用a控制a的兄弟元素 c(同級(jí)元素)：

.a:hover + .c {

color:red;

}

使用a控制a的就近元素d：

.a:hover ~ .d {

color:pink;

}

總結(jié)一下：

1. 中間什么都不加  控制子元素；

2. ‘+’ 控制同級(jí)元素(兄弟元素)；

3. ‘～’ 控制就近元素；

到此這篇關(guān)于html中CSS: hover選擇器改變子元素、同級(jí)元素、就近元素的樣式的文章就介紹到這了,更多相關(guān)CSS: hover選擇器的用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論