父元素的伪元素层级过高盖住子元素

最新推荐文章于 2024-08-26 14:07:21 发布
最新推荐文章于 2024-08-26 14:07:21 发布
阅读量3k 收藏 2
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MMryyy/article/details/103309438
版权

如下图，开始就觉得是伪元素出的问题，导致子元素超链接点击无效,排查了很久，终于被一句话点醒，伪元素作为父元素的子元素，强制display:block。突然想到可能是伪元素占据了空间，覆盖着后面的子元素只上，导致点击不了，可以给伪元素加背景证明，确实盖住。

解决伪元素盖住点击事件
在伪元素代码中加上这句，可穿透伪元素点击

pointer-events:none;

使用这个属性，可以在点击某元素的时候，穿过该元素，点击到该元素下面的元素

在这里插入图片描述

你的星辰大海
关注
专栏目录
解决父元素的伪元素覆盖子元素
polary_的博客
05-25 1758
为了完成以下记事本样式 用父元素(footer)的伪元素来写，阴影结果子元素(span) clear点击不到 给伪元素设置 pointer-events:none; 就可以解决 <footer> <span>{{list.length}} item left</span> <span class="clear" @click="reAll">clear</span> </footer> 一开始打算给伪元素的设置z-ind
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6554
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
【CSS】实现伪元素层级在父元素之下
最新发布
Komorebi_00的博客
08-26 382
伪元素默认层级是在父元素之上的，同时 ::after在::before之上，若要实现伪元素层级在父元素之下，则可通过以下方式实现。
伪元素实现hot层级图标
zmmsdk的博客
09-18 126
</div> <!-- 发生垂直塌陷的两种解决方案 --> <!-- 给父元素加边框 --> <!-- 给父元素添加overflow:hidden; --> ...
解决伪类元素‘after‘或者‘before‘遮挡父元素，导致鼠标移入或点击等事件不生效的问题
haogemr的博客
07-27 1942
对一个元素设置 pointer-events: none，能让浏览器在处理鼠标操作时，忽视掉这个元素的存在，直接「穿透」到点击区域背后的元素上。该元素上的鼠标事件不会被响应，例如 click、mousein、mousedown 事件。该元素上的鼠标效果不会被处理，例如 hover 效果。伪元素不能添加事件，因为他们不是DOM元素，无法响应。如果对显示没有影响的话，可以这么做。意味着直接在这个元素上做鼠标操作时。
html 伪元素作用,html – 在伪元素覆盖内部内容之前
weixin_33743292的博客
06-19 265
所以我创建了一个div作为父元素,里面有一个span元素,持有父元素的标题,我在父元素的伪元素(：before)之前定义了一个css,所以当用户将鼠标悬停在元素上时,它有一个很好的过渡但问题是：在覆盖span元素之前,标题被隐藏,当然是不可接受的！这是HTML：menu item 1和风格：.menuItem_Large{position: absolute;left: 0px;display: ...
同时设置伪类样式：a:link和a:visited，a:link被覆盖问题
Yinger699的博客
07-15 818
同时设置伪类样式：a:link和a:visited，a:link被覆盖问题 问题描述： 在练习的时候遇到了这个问题，查了度娘，上面说清除浏览器数据就可以显示了。。。可能我比较特殊吧，清除完数据并没有解决〒▽〒 然后看到某一个博主的博文，这才解决，于是赶紧写文章，记录下来，防止下次忘记( •̀ ω •́ )✧ 原因分析： 原来<a>标签的href属性必须要有值， 解决方案： 未正确书写链接地址时，a:link无效，效果为:visited样式 </h2>
css 添加伪元素：before与：after对所覆盖标签的影响
yydsme1_11的博客
12-10 2575
<div class="box121"> <ul> <li class="lib"> <a href="搜索.html">搜索</a> </li> <li class="lib"> <a href="首页.html">首页</a&gt..
web前端练习30----Css，布局（文档流，浮动，清除浮动，浮动高度塌陷，垂直外边距重叠问题，定位，层级，居中，flex布局及练习）
翟浩浩Android专栏
12-08 699
一、文档流： 文档流处在网页的最底层， 它表示的是一个页面的位置我们所创建的元素默认都处在文档流中 元素在文档流中的特点：块元素：1. 块元素在文档流中会独占一行， 块元素会自上向下排列。2. 块元素在文档流中默认宽度是父元素的100 % （铺满父元素）。3. 块元素在文档流中默认高度被内容(或者子元素) 撑开（ 包裹内容） 内联元素：1. 内联元素在文档流中只占自身大小， 会默认从左向右排列...
css定位-css新增选择器（内减，属性，伪类，2d变换，过渡）
qq_52711676的博客
06-08 665
定位的使用：1.4种定位方式：静态、相对、绝对、固定2.4种边偏移属性：left、right、top、bottom注意：偏移值准确的理解是“距离什么位置有多少像素” 。 如 top:100px; 距离顶部为100像素 （向下走）所有标准流都是静态定位语法： 2.相对定位 相对于自身在标准流的位置进行定位移动语法： 使用场景：微调元素和配合绝对定位来实现效果从父元素一直往上找设置过定位的直系父元素，作为自己的偏移参照物，找不到就继续往上找，直到html停止语法： 使用场景：配合相对定位使用（
HTML+CSS基础总结（下）
weixin_44708911的博客
09-28 253
。ps的基本操作: 想要将图片转化成网页最简单的方式就是使用ps了。 ps的默认单位不是像素，注意修改PS的单位。 用ps拾色器、选取、标尺等修改。一般公司有ps的大神。但也需要常规操作。 小项目实战： 首先： 分析布局，写基本的div元素 CSS：修改样式 设置div元素的宽高 *{ margin：0； padding:0; }} 设置页面字体 body{ font:12px/1宋体； } 分割div元素： 使用ps查看图片的大小，...
html中浮动到固定位置,CSS浮动与定位详细解析
weixin_30278943的博客
06-05 2056
1.文档流文档即一个网页，文档流处在网页的最底层，它表示的是页面中的一个位置，我们所创建的元素默认都处在文档流当中。通过浮动和定位可以脱离文档流。元素在文档流中的特点块元素：1.块元素会在文档流中独占一行，块元素会至上而下排列。2.块元素在文档流中的宽度默认值为auto(自动)，即为父元素的100%。3.块元素在文档流中的高度默认为内容高度，即被内容撑开，没有内容就为0，有内容的话，内容多少它就多...
css使用伪元素时遇到的层级问题
weixin_45781661的博客
06-07 667
css
伪元素与当前元素层级关系，解决有定位和无定位情况下如何让父元素层级高于子元素
dakuzi的博客
07-04 374
伪元素与当前元素层级关系以及使父元素层级高于子元素；
resize 按钮不会被伪元素遮盖
weixin_30312659的博客
05-06 110
textarea默认有个resize样式，效果就是下面这样 读 《css 揭秘》时发现两个亮点： 其实这个属性不仅适用于 textarea 元素，适用于下面所有元素： elements with overflow other than visible, and optionally replaced elements representing images or videos, and i...
css 子元素覆盖父元素内边框阴影 解决办法
qq_40509733的博客
06-16 2245
父元素用添加伪类元素方法 添加一个阴影样式 定位到父元素上方 代码： .parent::after{ content:''; position:absolute; left:rem(0); right:rem(0); top:rem(0); bottom:rem(0); border-radius:8px...
CSS_设置伪元素层级在父级下边
小歪博客
12-01 1045
CSS_设置伪元素层级在父级下边 css伪元素，层级太高，挡住了父级子元素。
CSS选择器权重比较的笔记总结
lonzisng
12-27 735
几类常用CSS选择器 以下他们单独作用在元素上的效果 行间样式： &lt;div style="background-color:block;"&gt;黑色背景&lt;/div&gt; id选择器： #box{ background-color:blue; } &lt;div id="box"&gt;蓝色背景&lt;/div&gt; class选择器（伪类选择器不列举）： ...
CSS伪元素与Content属性深度解析
它们分别在选择器匹配的元素前后插入子元素，使得开发者能够控制元素的前导或尾随内容。例如，通过这些伪元素，可以实现动态的装饰性文本或图标，而无需额外的HTML结构，从而减少了代码量，对搜索引擎优化有利。此外...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值