CSS 媒体特性 - 悬停

CSS 媒体特性hover 用于确定用户的设备是否可以悬停在元素上，例如将鼠标光标移动到链接或按钮上。

可能的值

none - 用户的设备（例如触摸屏）没有可用于悬停元素的指向输入机制。
hover - 用户的设备（浏览器）具有可用于悬停元素的指向输入机制。

语法

hover: none|hover;

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

CSS hover - none 值

以下示例演示了当用户设备不支持悬停时，按钮将始终具有粉红色背景和蓝色文本：

Open Compiler

<html>
<head>
<style>
   .hover-button {
      color: blue;
      background-color: pink;
      border: none;
      padding: 10px;
   }
   @media (hover: none) {
      .hover-button:hover {
         color: black;
         background-color: yellow;
      }
   }
</style>
</head>
<body>
   <button class="hover-button">Hover Me!</button>
</body>
</html>

CSS hover - hover 值

以下示例演示了当用户将鼠标悬停在按钮上时，背景颜色将变为黄色，文本颜色将变为黑色：

Open Compiler

<html>
<head>
<style>
   .hover-button {
      color: blue;
      background-color: pink;
      border: none;
      padding: 10px;
   }
   @media (hover: hover) {
      .hover-button:hover {
         color: black;
         background-color: yellow;
      }
   }
</style>
</head>
<body>
   <button class="hover-button">Hover Me!</button>
</body>
</html>

打印页面