CSS 媒体特性 - any-pointer

CSS 媒体特性 **any-pointer** 用于检测任何可用的指向元素的输入机制的存在，例如鼠标、触笔或触摸屏。它允许您根据用户使用的指向设备类型，对元素应用不同的样式或行为。

这对于创建适应用户输入方法的响应式设计非常有用。

可能的值

**none** − 此值表示没有可用的指向设备。换句话说，用户的设备没有任何指向的输入机制，这种情况非常罕见。
**coarse** − 这表示设备至少有一个能够指向元素的输入机制，但它可能不是很精确，例如触摸屏。粗略的设备通常缺乏鼠标或触笔的精度。
**fine** − 此值表示有一个指向设备可用，并且它是一个精度更高的精细设备，例如鼠标或触笔。

语法

any-hover: none|coarse|fine;

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS any-pointer - none 值

以下示例演示了当用户将鼠标悬停在按钮上时，**any-pointer: none** 媒体查询不会更改光标：

Open Compiler

<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** 媒体特性来在触摸屏等设备上以不同的方式设置段落的样式：

Open Compiler

<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** 媒体查询将更改光标：

Open Compiler

<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>

打印页面