CSS 媒体特性 - 指针

CSS 媒体特性pointer 检查用户是否拥有可用于指向和点击的指向设备，例如鼠标或触摸屏。

可能的值

none - 此值表示用户没有指向设备，例如鼠标或触摸屏。
coarse - 此值表示用户拥有指向精度不高的指向设备，例如触摸屏上的手指。
fine - 此值表示用户拥有指向精度很高的指向设备，例如鼠标。

语法

pointer: none|coarse|fine;

CSS 媒体特性any-pointer 可用于测试任何指向设备的精度。

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

CSS pointer - coarse 值

以下示例演示了如何使用 CSS 媒体特性pointer: coarse 在具有粗略指向设备（例如触摸屏）的设备上更改段落元素的样式 -

在手机或触摸屏设备上测试此示例。

Open Compiler

<html>
<head>
<style>
   p {
      background-color: pink;
   }
   @media (pointer: coarse) {
      p:hover {
         background-color: yellow; 
         border: 2px solid red;
      }
   }
</style>
</head>
<body>
   <p>CSS pointer: coarse Example</p>
</body>
</html>

CSS pointer - fine 值

以下示例演示了使用媒体特性 pointer: fine 在用户使用精细指向设备悬停在 p 元素上时更改元素外观的方法，背景颜色将更改为黄色，并且会添加红色边框。

Open Compiler

<html>
<head>
<style>
   p {
      background-color: pink;
   }
   @media (pointer: fine) {
      p:hover {
         background-color: yellow; 
         border: 2px solid red;
      }
   }
</style>
</head>
<body>
   <p>CSS pointer: fine Example</p>
</body>
</html>

打印页面