CSS 媒体功能 - any-hover

CSS 媒体功能 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>

打印本页