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>

打印页面