CSS pointer-events 属性

cssweb developmentfront end technology更新于 2025/11/27 2:20:17

pointer-events 属性指定元素在触发指针事件时是否执行某些操作。指针事件可以通过鼠标点击、触摸、触控笔等触发。

以下代码展示了 CSS 中 pointer-events 属性 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.pointer1 {
   font-size: 20px;
   padding: 10px;
   pointer-events: none;
}
.pointer2 {
   font-size: 20px;
   padding: 10px;
   pointer-events: auto;
}
</style>
</head>
<body>
<h1>Pointer-events property example</h1>
<div class="pointer1">
Go to <a href="https://www.wikipedia.org">wikipedia.org</a>
</div>
<div class="pointer2">
Go to <a href="https://www.google.com/">google.com</a>
</div>
<h2>Hover over the above links to see pointer events</h2>
</body>
</html>

输出

上述代码将产生以下输出 −

将鼠标悬停在第二个链接上时,您可以看到鼠标指针,因为我们设置了 pointerevents 属性。


相关文章


有用资源