CSS 媒體特性 - any-pointer

CSS 媒體特性 **any-pointer** 用於檢測任何可用的指向元素的輸入機制的存在，例如滑鼠、觸筆或觸控式螢幕。它允許您根據使用者使用的指向裝置型別，對元素應用不同的樣式或行為。

這對於建立適應使用者輸入方法的響應式設計非常有用。

可能的值

**none** − 此值表示沒有可用的指向裝置。換句話說，使用者的裝置沒有任何指向的輸入機制，這種情況非常罕見。
**coarse** − 這表示裝置至少有一個能夠指向元素的輸入機制，但它可能不是很精確，例如觸控式螢幕。粗略的裝置通常缺乏滑鼠或觸筆的精度。
**fine** − 此值表示有一個指向裝置可用，並且它是一個精度更高的精細裝置，例如滑鼠或觸筆。

語法

any-hover: none|coarse|fine;

CSS any-pointer - none 值

以下示例演示了當使用者將滑鼠懸停在按鈕上時，**any-pointer: none** 媒體查詢不會更改游標：

<html>
<head>
<style>
   button{
      padding: 5px;
      background-color: yellow;
      border: none
   }
   @media (any-pointer: none) {
      button:hover {
         background-color: pink; 
         border: 2px solid red;
         cursor: pointer;
      }
   }
</style>
</head>
<body>
   <p>When the user hovers over the paragraph the cursor will not change.</p>
   <button>any-pointer: none</p>
</body>
</html>

CSS any-pointer - coarse 值

以下示例演示瞭如何使用 **any-pointer: coarse** 媒體特性來在觸控式螢幕等裝置上以不同的方式設定段落的樣式：

<html>
<head>
<style>
   .content {
      padding: 5px;
      background-color: yellow;
   }
   @media (any-pointer: coarse) {
      .content:hover {
         background-color: pink; 
         border: 2px solid red;
         cursor: pointer;
      }
   }
</style>
</head>
<body>
   <div class="content">
      <h3>any-pointer: coarse Example</h3>
      <p>When the user hovers over the paragraph the cursor will change.</p>
   </div>
</body>
</html>

CSS any-pointer - fine 值

以下示例演示了當使用者將滑鼠懸停在段落上時，**any-pointer: fine** 媒體查詢將更改游標：

<html>
<head>
<style>
   .content {
      padding: 5px;
      background-color: yellow;
   }
   @media (any-pointer: fine) {
      .content:hover {
         background-color: pink; 
         border: 2px solid red;
         cursor: pointer;
      }
   }
</style>
</head>
<body>
   <div class="content">
      <h3>any-pointer: fine Example</h3>
      <p>When the user hovers over the paragraph the cursor will change.</p>
   </div>
</body>
</html>

列印頁面