【CSS】伪元素绑定事件

最新推荐文章于 2024-07-06 12:59:14 发布

Walker丶soso

最新推荐文章于 2024-07-06 12:59:14 发布

阅读量1.8k

点赞数 3

文章标签： css

本文链接：https://blog.csdn.net/sjs1995/article/details/108007444

版权

CSS中给伪元素绑定事件的方法

1、第一步：给父元素添加

	pointer-events:none;

2、第二步：给伪元素添加

	pointer-events:auto;    //覆盖父元素pointer-events:none，响应事件

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Walker丶soso

关注关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

几种HTML标签伪元素绑定事件的方式

在线学习web前端开发教程

12-24

1043

下面整理出几种简便方式实现 click 伪元素时进行事件处理，附上例子代码。 HTML结构首先 HTML 结构是这样的 <section> <span>按钮文字</span> </section> 实现方法第一种通过 CSS3 的 pointer-events 特性来实现。 CSS 代码专门建立的学习Q-q-u-n： 731...

阻止伪元素点击事件（事件冒泡、事件捕获）

enmmmm的博客

07-29

1398

优化体验：元素上绑定了点击事件，该元素上设置伪元素是为了画指引竖线，因此不希望伪元素上触发点击事件。  <div @click="handleClick" class="wapper"> <ul> <li>apple</li> <li>banana</li> </ul> </div>  handleClick(e) {

2 条评论您还未登录，请先登录后发表或查看评论

伪元素绑定事件

qq_16714671的博客

02-08

591

方式一C3属性：给元素设置pointer-events: none ，给伪元素设置pointer-events: auto；方式二：通过事件冒泡； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .li { heig.

给伪元素(::before / ::after) 绑定点击事件

nunumaymax的博客

01-18

783

伪元素没有 dom 结构，所以无法直接绑定事件。可以利用事件捕获，把事件处理程序绑定到父元素上，再用css禁掉父元素的点击事件 (点击父元素无法再触发点击事件)，同时开启子元素的点击事件。

给伪元素添加点击事件

记忆碎片

12-27

1949

给伪元素添加点击事件（在css样式中添加以下代码）：父元素添加：pointer-events: none; 伪元素添加：pointer-events: auto;

如何在伪元素上添加点击事件?

juan9872的博客

04-15

695

伪元素是CSS中的一种特殊选择器, 用于在元素的特定位置插入内容, 它们被称为“伪元素”, 是因为它们不是实际存在于HTML DOM文档中的元素, 而是通过CSS来创建的，那伪元素如何添加点击元素？在页面上我们无法通过jQuery获取到元素中的伪元素进行事件绑定，所以我们利用pointer-events属性屏蔽元素操作事件, 将事件绑定到伪元素上。" 伪元素使用"pointer-events: auto;在伪元素代码中加上这句，可穿透伪元素点击。解决伪元素盖住点击事件。

CSS伪类元素无法绑定点击事件

qq_38810813的博客

03-10

912

惭愧，学了这么多年CSS，今天才知道原来所有的伪类元素都无法添加点击事件，因为伪类元素不是dom元素记录一下~

【建议收藏】CSS的伪类和伪元素

m0_60125660的博客

07-21

面试题： Html 1，html语义化 2，meta viewport相关 3，canvas 相关 CSS 1，盒模型 1.1，ie盒模型算上border、padding及自身（不算margin），标准的只算上自身窗体的大小 css设置方法 1.2，几种获得宽高的方式 1.3，拓展各种获得宽高的方式 1.4，边距重叠解决方案(BFC) BFC原理 2，css reset 和 normalize.css 有什么区别 3，居中方法 3.1，水平方向上 3.2，垂直居中 3.3，垂直水平居中根据上方结合 4，

【CSS】伪元素

kakaai77的博客

03-29

363

伪元素 常见的伪元素 ::first-line ::first-letter ::before ::after 为了区分伪类和伪元素，建议伪元素都使用2个冒号 ::first-line可以针对首行文本设置属性 ::first-letter可以针首字母设置属性 ::before 在一个元素前插件元素 ::after 在一个元素后插入元素

hselect是一个用来通过js修改伪元素css值的小工具

08-10

在Web开发中，CSS伪元素是不可直接通过JavaScript选中和操作的。因为它们并非DOM树中的实际元素，而是由浏览器根据CSS规则自动生成的。`hselect` 就是为了解决这个问题，它提供了一种方式，让我们能够通过JavaScript...

浅谈css的伪元素::after和::before && 给伪元素添加点击事件

东方雨舞

05-25

8073

css中的::after和::before已经被大量地使用在我们日常开发中了，使用他们可以使我们的文档结构更加简洁。但是很多人对::after和::before仍不是特别了解，究竟他们是做什么的？如何使用他们？什么时候应该使用他们？笔者总结了一些对伪元素的理解和使用经验。一、概念： 1.定义 The CSS ::before(::after)pseudo-elementmatches a virtual first(last) child of the selected element. It ..

给伪元素绑定点击事件，VUE3 splitpanes绑定::after ::before点击事件 html js css

最新发布

zhimooo的博客

07-06

463

通过伪元素css添加鼠标指针状态，然后在click事件【判断当前点击的dom】和【当前的指针状态】，以此来实现点击效果。有个需求，用splitpanes做页面可以拉动改变宽度，然后想给中间伪元素的小按钮【绑定点击事件】，以达到显示隐藏某模块的效果。搜了一圈，并没有发现比较方便的办法，伪元素不是真实存在的dom，所以没办法绑定点击事件。请注意，在此处我的伪元素的width是占满的，所以我并没有判断x坐标（width）是否在伪元素中。click事件【判断当前点击的dom】，加上【判断当前点击的坐标】

前端伪类元素如何添加点击事件

Kerwin__li的博客

02-20

3538

当我给盒子添加点击事件的时候他会事件冒泡到父元素上，所以给父元素点击事件，那么红色的方块也会触发事件。这样就可以达到让伪元素添加事件的效果了。思考：如何让红色方块点击后会有事件？也可以避免组件冗余，添加类名即可。

css之伪类、伪元素

u013404441的博客

03-30

140

什么是伪类、伪元素？ * 伪类：希望在特定状态下，给元素呈现特定的样式。例如：超链接，在链接被点击之后，呈现特定的样式，我们就可以使用:visited这个伪类给超链接添加特定的样式。伪类的前缀是一个：常用的伪类分类： 1.状态伪类: 例如 link、visited、hover、active、focus； 2.结构化伪类：例如first-child、last-child； 3.表...

伪元素添加点击事件

ju__ju的博客

10-24

823

前端伪元素加点击事件,触发点击事件

css伪元素

weixin_44379204的博客

04-01

131

伪元素 选择器示例示例说明 :checked input:checked 选择所有选中的表单元素 :disabled input:disabled 选择所有禁用的表单元素 :empty p:empty 选择所有没有子元素的p元素 :enabled input:enabled 选择所有启用的表单元素 :first-of-type p:first-of-type 选...

vue开发父元素和子元素都绑定了事件，阻止事件冒泡

qq_35504206的博客

04-26

7058

<div @click="a"> <button @click="b"></button> </div>事件描述：当触发button的事件a时，b事件也会被触发解决办法：在button上添加@click.stop="b"，来阻止事件冒泡。...

JS工具方法 4 伪元素点击事件实现的两种方法