CSS 媒体功能 - Pointer

CSS 媒体功能 Pointer 检查用户是否有可用于指向和单击的指针设备，例如鼠标或触摸屏。

可能的值

none − 此值表示用户没有指针设备，例如鼠标或触摸屏。
coarse − 此值表示用户的指针设备不是很准确，例如触摸屏上的手指。
fine − 此值表示用户具有非常准确的指针设备，例如鼠标。

语法


pointer: none|coarse|fine;

CSS 媒体特性 any-pointer 可用于测试任何指针设备的准确性。

CSS 指针 - 粗略值

以下示例演示如何使用 CSS 媒体功能 pointer：coarse 在具有粗略指针设备的设备（如触摸屏）上更改段落元素的样式 -

在移动设备或触摸屏设备上测试示例。


<html>
<head>
<style>
	 	p {
	 	 	 background-color: pink;
	 	}
	 	@media (pointer: coarse) {
	 	 	 p:hover {
	 	 	 	 	background-color: yellow;	
	 	 	 	 	border: 2px solid red;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<p>CSS pointer: coarse Example</p>
</body>
</html>

CSS 指针 - fine Value

以下示例演示了媒体功能 pointer： fine 的使用，当用户使用精细指针设备将鼠标悬停在 pelement 上时，可以更改元素的外观，背景颜色将变为黄色，并添加红色边框。


<html>
<head>
<style>
	 	p {
	 	 	 background-color: pink;
	 	}
	 	@media (pointer: fine) {
	 	 	 p:hover {
	 	 	 	 	background-color: yellow;	
	 	 	 	 	border: 2px solid red;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<p>CSS pointer: fine Example</p>
</body>
</html>

打印本页