CSS 媒体功能 - hover

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>

本页