css中为伪元素增加点击事件和hover

鼠标悬停在父元素上面时为伪类元素增加样式

<!-- html结构 -->
<div class="father"></div><style>.father::after {content: 'after';}.father:hover::after {color: pink;}</style>

伪元素添加点击事件

冒泡和捕获问题

事件冒泡是指发生在子元素身上的事件，会冒泡至父元素身上。

事件捕获是指发生在子元素身上的事件，会先执行父元素身上的事件，再执行子元素身上的事件。

在js中怎么禁止？

使用event.stopPropagation

在vue中怎么禁止？

.stop 阻止冒泡事件

.capture 设置捕获事件

.self 只有点击当前元素的时候，才会触发处理函数

.once 处理函数只被触发一次

注：这些事件修饰符都是可以链式调用的

基本实现思路：

使用pointer-events这个属性。

pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target

通俗点就是说，就是设置允不允许这个元素被鼠标操作。

首先，我们给div标签样式添加pointer-events: none;，此时这个标签永远不会成为鼠标事件的target，也就是说我们无论如何点击这个div标签，都是不会触发该标签绑定的btnClick()回调函数
然后，我们给该标签的::after伪元素（::before也是可以的）样式里添加一句pointer-events: auto;，相当于给这个伪元素开启了鼠标事件，当我们点击该伪元素时，可以冒泡到父元素的点击事件去。

方法缺陷：

无法区分是哪一个伪元素出发的父元素的点击事件

父元素中的所有鼠标事件都被禁止，包括hover

伪类元素的好处：提高性能，优化SEO

css中为伪元素增加点击事件和hover相关推荐

CSS 中的伪元素是什么，有什么用处
CSS 中的伪元素是一种特殊的元素,它们不是 HTML 元素,但通过 CSS 属性和关系运算符,我们可以为它们指定与实际 HTML 元素相同的样式.伪元素可以用于实现一些特殊的效果,比如动画.阴影.弹 ...
php怎么加css和背景图,如何使用css中:after伪元素实现背景图片的叠加层？
在网页设计中我们发现越来越多的文本会放在图像之上,通常情况下,这不太好操作,因为图像具有动态颜色和光照,文本大部分是一种颜色.这通常对于可读性和可访问性的不太有利的,可能会让文本看起来不太清楚. 这意 ...
css中的伪元素、基线对齐、盒子模型
目录一.伪元素二.基线对齐三.盒子模型 1.外边距margin 2.边框(border) 一.伪元素说明:伪类元素使用两个冒号(::)而不是一个冒号,目的是为区分伪类和伪元素,大多数浏览器都支 ...
css中的伪元素的使用
CSS伪元素::after用来创建一个伪元素,作为已选中元素的最后一个子元素.通常会配合content属性来为该元素添加装饰内容.这个虚拟元素默认是行内元素. ::after表示法是在CSS 3中引入 ...
css 选父元素,CSS中模拟父元素选择器
很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...
【CSS】457- CSS 伪元素指南
层叠样式表(css)是一种独立的语言,用于描述web应用程序的表示.这涉及到诸如颜色.字体和HTML元素布局的完全控制等概念. 在本文中,将为您介绍级联样式表中的伪元素,以及如何将它们与兼容性一起使用 ...
html,js 中如何屏蔽div子元素点击事件会触发父元素的点击事件（$event.cancelBubble=true；）
1. 第一种方法:html中屏蔽父元素的点击事件($event.cancelBubble=true;) <div (click)="select($event)"> & ...
[css] 如何使用伪元素实现增大点击热区来增加用户体验？
[css] 如何使用伪元素实现增大点击热区来增加用户体验? .extend-via-pseudo-elem {position: relative; }.extend-via-pseudo-elem: ...
CSS中的伪类和伪元素（详细）
这篇想要跟大家分享的是css中的伪类和伪元素,有任何问题可以私聊我或者评论哦! 首先,我们先来想一下一.引入伪类跟伪元素的原因? 伪类和伪元素的引入是因为在文档树里有些信息无法被充分描述比如CSS ...

css中为伪元素增加点击事件和hover

鼠标悬停在父元素上面时为伪类元素增加样式

伪元素添加点击事件

css中为伪元素增加点击事件和hover相关推荐

最新文章

热门文章