CSS 媒體特性 - 懸停

CSS 媒體特性hover 用於確定使用者的裝置是否可以懸停在元素上，例如將滑鼠游標移動到連結或按鈕上。

可能的值

none - 使用者的裝置（例如觸控式螢幕）沒有可用於懸停元素的指向輸入機制。
hover - 使用者的裝置（瀏覽器）具有可用於懸停元素的指向輸入機制。

語法

hover: none|hover;

CSS hover - none 值

以下示例演示了當使用者裝置不支援懸停時，按鈕將始終具有粉紅色背景和藍色文字：

<html>
<head>
<style>
   .hover-button {
      color: blue;
      background-color: pink;
      border: none;
      padding: 10px;
   }
   @media (hover: none) {
      .hover-button:hover {
         color: black;
         background-color: yellow;
      }
   }
</style>
</head>
<body>
   <button class="hover-button">Hover Me!</button>
</body>
</html>

CSS hover - hover 值

以下示例演示了當使用者將滑鼠懸停在按鈕上時，背景顏色將變為黃色，文字顏色將變為黑色：

<html>
<head>
<style>
   .hover-button {
      color: blue;
      background-color: pink;
      border: none;
      padding: 10px;
   }
   @media (hover: hover) {
      .hover-button:hover {
         color: black;
         background-color: yellow;
      }
   }
</style>
</head>
<body>
   <button class="hover-button">Hover Me!</button>
</body>
</html>

列印頁面