CSS pointer-events 用法和属性，意思

Java&Develop

已于 2022-06-12 10:47:10 修改

阅读量371

点赞数

分类专栏： Java开发文章标签： css 前端 css3

于 2022-06-12 10:43:33 首次发布

本文链接：https://blog.csdn.net/weixin_48616345/article/details/125242808

版权

Java开发专栏收录该内容

247 篇文章 1 订阅

订阅专栏

总结

pointer-events: none;
none 元素不能对鼠标事件做出反应
也就是，鼠标点击链接不能跳转到指定路径

div.ex2 { pointer-events: auto; }
auto 默认值，设置该属性链接可以正常点击访问。
也就是，鼠标点击链接可以跳转到指定路径

设置元素是否对鼠标事件做出反应：

div.ex1 {   pointer-events: none; }   //

none	元素不能对鼠标事件做出反应

div.ex2 {   pointer-events: auto; }

auto	默认值，设置该属性链接可以正常点击访问。

演示案例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>

<style> 
div.ex1 {
  pointer-events: none;
}

div.ex2 {
  pointer-events: auto;
}
</style>
</head>
<body>

<h1>pointer-events 属性</h1>

<p>鼠标移动到链接上查看元素的反应。</p>

<h2>pointer-events: none:</h2>
<div class="ex1">访问(不会跳转) <a href="http://www.runoob.com/">菜鸟教程 》</a></div>

<h2>pointer-events: auto (默认):</h2>
<div class="ex2">访问  <a href="http://c.runoob.com/">菜鸟工具 》</a></div>


</body>
</html>

效果

在这里插入图片描述

Java&Develop

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS pointer-events 用法和属性，意思

pointer-events: none;none 元素不能对鼠标事件做出反应也就是，鼠标点击链接不能跳转到指定路径div.ex2 { pointer-events: auto; }auto 默认值，设置该属性链接可以正常点击访问。也就是，鼠标点击链接可以跳转到指定路径......
复制链接

扫一扫