css中的hover怎麼用-css教學-PHP中文網

css中的hover怎麼用

清浅

發布： 2020-10-13 09:08:32

原創

111103 人瀏覽過

在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中文網其他相關文章！