ประเภท pseudo-class :hover ของ CSS

การกำหนดและการใช้งาน

CSS :hover ประเภท pseudo-class ใช้เพื่อเลือกองค์ประกอบเมื่อมีการเกาะเมาส์。

คำแนะนำ::hover ประเภท pseudo-class สามารถใช้กับทุกองค์ประกอบ ไม่ได้เพียงแค่ลิงก์เท่านั้น。

คำแนะนำ:โปรดใช้: :link กำหนดรูปแบบสไตล์สำหรับลิงก์ที่ยังไม่เข้าเว็บไซต์ โดยใช้: :visited กำหนดรูปแบบสไตล์สำหรับลิงก์ที่เคยเข้าเว็บไซต์แล้ว โดยใช้: :active กำหนดรูปแบบสไตล์สำหรับลิงก์ที่มีการกด:

注意：ในการกำหนด CSS รูปแบบ::hover ต้องถูกจัดทำให้ :link และ :visited（ถ้ามีอยู่）ก็จะมีผลบังคับต่อ!

ตัวอย่าง

ตัวอย่าง 1

เลือกและกำหนดรูปแบบสไตล์สำหรับลิงก์ขณะเกาะเมาส์:

a:hover {
  background-color: yellow;
  font-size: 18px;
}

親自試一試

ตัวอย่าง 2

เลือกและกำหนดรูปแบบสไตล์สำหรับ HTML องค์ประกอบ <p>、<h1> และ <a> ขณะเกาะเมาส์:

p:hover, h1:hover, a:hover {
  background-color: yellow;
}

親自試一試

例子 3

選擇並設置未訪問、已訪問、懸停和活動鏈接的樣式：

/* 未訪問的鏈接 */
a:link {
  color: green;
}
/* 已訪問的鏈接 */
a:visited {
  color: green;
}
/* 鼠標懸停的鏈接 */
a:hover {
  color: red;
}
/* 激活的鏈接 */
a:active {
  color: yellow;
}

親自試一試

例子 4

為鏈接設置不同的樣式：

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

親自試一試

例子 5

懸停在 <span> 元素上以顯示 <div> 元素（類似於工具提示）：

div {
  display: none;
}
span:hover + div {
  display: block;
}

親自試一試

例子 6

在鼠標懸停時顯示和隱藏“下拉”菜單：

ul {
  display: inline;
  margin: 0;
  padding: 0;
}
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
  position: absolute;
  width: 200px;
  display: none;
}
ul li ul li {
  background: #555;
  display: block;
}
ul li ul li a {display:block !important;}
ul li ul li:hover {background: #666;}

親自試一試

CSS 語法

:hover {
  css declarations;
}

技術細節

瀏覽器支持

表格中的數字指定了完全支持該伪類的首個瀏覽器版本。

相關頁面

教程：CSS 链接

教程：CSS 伪類