前几天遇到一种需求, 就是在特定条件下, 需要给卡片加上遮罩层, 但是呢, 这个块元素加了hover, 我加上蒙层依然可以触发hover, 所以这时候, 我们就可以使用pointer-events来实现这个功能
在写这个功能之前, 我们先来实现一下这个错误的效果
首先给大家看一下hover的效果
我们给状态为2的添加了一个蒙层, 按说应该是禁用的效果, 什么hover效果都不应该出现
但是呢, 效果并不是这样, 我们发现颜色变了, hover触发了
我们怎么改呢?
这时, 就需要我们了解pointer-events了, 它其实有很多值, 大部分都是针对SVG, 但是呢, 它存在的意义就是用来描述一个元素是否对鼠标事件做出反应, 我们主要说一下none, 如果我们设置为none, 表示元素忽略了鼠标事件
我们可以给这个卡片设置pointer-events为none, 看看效果
会发现鼠标悬停也不会触发hover了
那既然这样, 我们可以加个动态class, 只有状态为2的时候, 需要加上pointer-events即可实现我们的需求
这样, 我们的需求就实现了
今天我们就说到这里
我们下期见
