css中hover屬性的使用方法:可以在選擇鼠標指針浮動在上面的元素中使用,例如在css中添加以下語法格式“標簽選擇器:hover{樣式代碼;}”格式進行使用,共有4種使用方式比如:1、直接在懸浮元素上改變樣式;2、改變子元素的樣式;3、改變同級元素的樣式;4、改變就近元素的樣式等。
hover的定義
:hover 選擇器用于選擇鼠標指針浮動在上面的元素,它適用于所有元素
:hover 選擇器適用于所有元素
hover的用法
用法一:鼠標懸浮在元素上改變元素樣式
例:當鼠標懸浮在字體上,字體顏色發生改變
< style >h1:hover{
color: pink;
}
</ style >
</ head >
< body >
< h1 >億速云</ h1 >
</ body >
這個是最普通的用法了,只是改變了style樣式
用法2:通過hover控制其他塊的樣式
這個用法可以有分為以下三種樣式
(1)控制子元素的樣式
< style >h1:hover p{
background-color: pink;
}
</ style >
</ head >
< body >
< h1 >億速云
< p >hover的用法</ p >
</ h1 >
(2)控制兄弟元素的樣式
< style >h1:hover+p{
background-color: pink;
}
</ style >
</ head >
< body >
< h1 >億速云</ h1 >
< p >hover的用法</ p >
(3)控制就近元素的樣式
‘~’ 控制就近元素
< style >h1:hover~p{
background-color: pink;
}
</ style >
</ head >
< body >
< h1 >億速云</ h1 >
< p >hover的用法</ p >