CSS 媒體特性 - any-hover

CSS 媒體特性 any-hover 用於檢測是否存在任何可用於懸停在元素上的輸入機制。它通常用於根據使用者的輸入裝置是否支援懸停來應用不同的樣式或行為。

這對於建立適應使用者裝置功能的響應式設計特別有用。

可能的值

any-hover 媒體特性可以具有以下值

none − 此值表示沒有可用於懸停在元素上的指向裝置。換句話說，使用者的裝置不支援懸停互動。
hover − 此值表示存在可用於懸停在元素上的指向裝置。這意味著使用者的裝置支援懸停互動，例如滑鼠或手寫筆。

語法

any-hover: none|hover;

CSS any-hover - none 值

以下示例演示了當您將滑鼠懸停在按鈕上時，@media (any-hover: none) 媒體特性無法更改按鈕的外觀 -

<html>
<head>
<style>
   button {
      padding: 10px;
      background-color: pink;
      border: none;
   }
   @media (any-hover: none) {
      button:hover {
         background-color: yellow;
         color: black;
      }
   }
</style>
</head>
<body>
   <h3>any-hover: none Example</h3>
   <button>Hover Me!</button>
</body>
</html>

CSS any-hover - hover 值

以下示例演示了當您將滑鼠懸停在按鈕上時，按鈕的顏色將更改為黃色，文字將變為黑色 -

<html>
<head>
<style>
   button {
      padding: 10px;
      background-color: pink;
      border: none;
   }
   @media (any-hover: hover) {
      button:hover {
         background-color: yellow;
         color: black;
      }
   }
</style>
</head>
<body>
   <h3>any-hover: hover Example</h3>
   <button>Hover Me!</button>
</body>
</html>

列印頁面