溫馨提示×

html中hover屬性怎么用

沐橙
2646
2021-05-18 10:34:54
欄目: 編程語言

html中hover屬性的使用方法:可以在選擇鼠標指針浮動在上面的元素中使用,例如在html中添加以下語法格式“標簽選擇器:hover{樣式代碼;}”格式進行使用,共有4種使用方式比如:1、直接在懸浮元素上改變樣式;2、改變子元素的樣式;3、改變同級元素的樣式;4、改變就近元素的樣式等。

html中hover屬性怎么用

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 >

0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女