CSS 媒体功能 hover 用于确定用户的设备是否可以将鼠标悬停在元素上，例如将鼠标光标移动到链接或按钮上。
可能的值
- none − 用户的设备（如触摸屏）没有可用于将鼠标悬停在元素上的指向输入机制。
- hover - 用户的设备（浏览器）具有指向输入机制，可用于将鼠标悬停在元素上。
语法
hover: none|hover;
CSS hover - none 值
以下示例演示了当用户设备不支持悬停时，按钮将始终具有粉红色背景和蓝色文本 -
<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值
以下示例演示了当用户将鼠标悬停在按钮上时，背景颜色将变为黄色，文本颜色将变为黑色 -
<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>
