首頁 > web前端 > css教學 > css中的hover怎麼用

css中的hover怎麼用

清浅
發布: 2020-10-13 09:08:32
原創
111157 人瀏覽過

在css中hover用於選擇滑鼠指標浮動在上面的元素,語法“標籤選擇器:hover{樣式代碼;}”,用法:1、直接在懸浮元素上改變樣式;2、改變子元素的樣式;3、改變同級元素的樣式;4、改變就近元素的樣式等。

css中的hover怎麼用

在CSS中有hover屬性,當滑鼠移上去的時候可以將其激活,它可以用來實現類似js的一些功能。接下來在文章中將為大家具體介紹hover屬性如何使用,希望對大家有幫助。

【推薦課程:CSS教學

#hover的定義

:hover 選擇器用於選擇滑鼠指標浮動在上面的元素,它適用於所有元素

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

hover的用法

##用法一:滑鼠懸浮在元素上改變元素樣式

#範例:當滑鼠懸浮在字體上,字體顏色改變

 <style>
    h1:hover{
      color: pink;
    }
  </style>
</head>
<body>
  <h1>PHP中文网</h1>
</body>
登入後複製

效果圖:

css中的hover怎麼用

這個是最普通的用法了,只是改變了style樣式

#用法2:透過hover控制其他區塊的樣式

這個用法可以有分成以下三種樣式

(1)控制子元素的樣式

<style>
    h1:hover p{
      background-color: pink;
    }
  </style>
</head>
<body>
  <h1>PHP中文网
<p>hover的用法</p>
  </h1>
登入後複製

效果圖:

css中的hover怎麼用

#(2)控制兄弟元素的樣式

' ' 控制同級元素(兄弟元素)

<style>
    h1:hover+p{
      background-color: pink;
    }
  </style>
</head>
<body>
  <h1>PHP中文网</h1>
  <p>hover的用法</p>
登入後複製

效果圖:

Image 004.png

(3)控制就近元素的樣式

'~' 控制就近元素

<style>
    h1:hover~p{
      background-color: pink;
    }
  </style>
</head>
<body>
  <h1>PHP中文网</h1>
  <p>hover的用法</p>
登入後複製

效果圖:

Image 004.png

總結:以上就是這篇文章的全部內容了,希望對大家有幫助。

以上是css中的hover怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板