css 屏幕鼠标事件 pointer-events:none 划到空白区域不进行触发

最新推荐文章于 2022-11-24 17:40:54 发布

妙莲

最新推荐文章于 2022-11-24 17:40:54 发布

阅读量406

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_44166439/article/details/113866036

版权

css 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了如何使用CSS的pointer-events属性来屏蔽鼠标事件，以及opacity属性实现元素透明效果。当鼠标悬停在红色边框区域内时，导航栏会从右侧滑入并变为半透明。通过将背景用rgba或使用定位实现背景和内容的叠加，避免内容跟随透明。示例代码展示了具体实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

pointer-events:none; 屏蔽鼠标事件
opacity:value; filter:alpha(opacity=value)透明，内容会跟着透明如果不想内容透明解决方案？1.把background用rgba实现 2. 用定位实现，背景和内容单独出来，用定位使其叠加在一起

只有划到红框内才触发hover事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{margin:0;padding:0}
    div{width:300px;height:300px;position:relative;border: 1px solid red;}
    nav{width:300px;height:300px;background:#000;color:#fff;font-size:50px;
    position:absolute;
    top:0;
    left:300px;
    transition: 1s;
    opacity: 0;
    pointer-events: none;
    }
    div:hover nav{left: 0;opacity: .5;}
  </style>
</head>
<body>
  <div>
    <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="">
    <nav>哈</nav>
  </div>
</body>
</html>