html中CSS:hover選擇器改變子元素、同級元素、就近元素的樣式
更新時間：2023年08月12日 14:34:02 投稿：yin
鼠標懸浮覆蓋元素后,以前使用js的mouseover和mouseout添加監(jiān)聽事件可以實現(xiàn)交互,現(xiàn)在可以使用CSS中的:hover選擇器提高性能,:hover選擇器可以針對不同的HTML元素,在鼠標懸停時改變元素（也可以是子元素、同級元素、就近元素）的樣式,增強網(wǎng)頁的互動性和用戶體驗,
鼠標懸浮覆蓋元素后，以前使用js的mouseover和mouseout添加監(jiān)聽事件可以實現(xiàn)交互?，F(xiàn)在可以使用CSS中的:hover選擇器提高性能。:hover選擇器可以針對不同的HTML元素，在鼠標懸停時改變元素（也可以是子元素、同級元素、就近元素）的樣式，增強網(wǎng)頁的互動性和用戶體驗。
定義：
:hover 選擇器用于選擇鼠標指針浮動在上面的元素。
:hover 選擇器適用于所有元素
基礎(chǔ)用法：
這個表示的是：當鼠標懸浮在a這個樣式上的時候，a的背景顏色設(shè)置為黃色
a:hover
{
background-color:yellow;
}
這個是最普通的用法了，只是通過a改變了style
進階用法:
使用a 控制其他塊的樣式：
使用a控制a的子元素 b：
.a:hover .b {
background-color:blue;
}
使用a控制a的兄弟元素 c(同級元素)：
.a:hover + .c {
color:red;
}
使用a控制a的就近元素d：
.a:hover ~ .d {
color:pink;
}
總結(jié)一下：
1. 中間什么都不加 控制子元素；
2. ‘+’ 控制同級元素(兄弟元素)；
3. ‘～’ 控制就近元素；
到此這篇關(guān)于html中CSS: hover選擇器改變子元素、同級元素、就近元素的樣式的文章就介紹到這了,更多相關(guān)CSS: hover選擇器的用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
用CSS控制表格或單元格強制換行,防止表格被英文單詞或中文撐大
自動換行問題,正常字符的換行是比較合理的,而連續(xù)的數(shù)字和英文字符常常將容器撐大,挺讓人頭疼,下面介紹的是CSS如何實現(xiàn)換行的方法2008-10-10
大部分是由注釋造成文字溢出，屬于IE6的BUG，溢出文字的字數(shù)=注釋的條數(shù)*2-1，這里的字數(shù)在中 文或英文數(shù)字時都成立。注釋坐在位置與溢出位置、區(qū)塊的浮動以及文字區(qū)塊的固定寬度有必然聯(lián)系。2008-12-12
IE與FireFox的兼容性問題...2006-11-11
驚嘆于老外的發(fā)現(xiàn) 《CSS Background image on html image element?》，自己從沒關(guān)注過，也沒想過如此的問題。2009-04-04
推薦深入理解css中的position定位和z-index屬性
推薦深入理解css中的position定位和z-index屬性...2007-10-10
CSS 規(guī)則的優(yōu)先級是Web前端開發(fā)人員必須理解的一個概念，我們常用的添加樣式的方法有4種。2008-04-04
昨夜與群友討論圖片垂直居中時,突然想到與這很相像的DIV垂直居中效果.raozou分享了他的效果代碼,今將其整理,特貼下來大家一起分享2008-07-07
用css來實現(xiàn)自動截取文字，不需要后臺程序和JS的使用。2008-06-06
用了這么多年的CSS，現(xiàn)在才明白CSS的真正匹配原理，不知道你是否也跟我一樣？2010-06-06
推薦徹底弄懂CSS盒子模式(DIV布局快速入門)...2007-03-03