CSS 伪元素上的事件侦听器,例如 ::after 和 ::before?

2024-04-11

我有一个div带有 CSS 伪元素的元素::before用作关闭按钮(而不是使用实际按钮)。如何应用事件侦听器only伪元素?

HTML

<div id="box"></div>

CSS

#box:before
{
 background-image: url(close.png);
 content: '';
 display: block; 
 height: 20px;
 position: absolute;
 top: -10px;
 right: -10px; 
 width: 20px;
}

#box
{
 height: 100px;
 width: 100px;
}

正在寻找解决方案并找到了这个线程。现在想分享我的解决方法:

CSS

element { pointer-events: none; }
element::after { pointer-events: all; }

JS

element.addEventListener('click', function() { ... });

如果您不需要任何指针事件,则此方法有效element。检查一下action https://jsfiddle.net/fqhk7dea/.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS 伪元素上的事件侦听器,例如 ::after 和 ::before? 的相关文章

随机推荐

  • 设计confirmation_token无效

    我的用户 rb class User lt ActiveRecord Base devise database authenticatable registerable confirmable token authenticatable r
  • 如何使用 python 避免机器人检测并抓取网站?

    我的问题 我想抓取以下网站 https www coches net segunda mano https www coches net segunda mano 但每次我用 python selenium 打开它时 我都会收到消息 他们将
  • Spring框架有自己的bean吗?

    这段文字来自 Core Java Server Faces 一书 有两个独立的机制是历史的偶然 CDI bean 和 JSF 托管 bean 适用于可在 JSF 中使用的 bean 页 我们建议您使用 CDI bean 除非您的应用程序必须
  • Python - 如何在 Visual Studio Code 本身中显示图形?

    当我尝试运行这个示例时 import matplotlib pyplot as plt import matplotlib as mpl import numpy as np x np linspace 0 20 100 plt plot
  • GDI+闪烁

    所以我正在尝试制作一个廉价的 Gyazo 屏幕截图工具 副本 问题是光标坐标闪烁 我该如何防止呢 我已经尝试过了WM ERASEBKGND但这没有任何帮助 另外我的代码还有什么问题吗 有什么不好的做法 技术吗 include
  • 如何继承替换switch case?

    我正在使用 C Switch case 如何使用继承来替换 情况就像 1 2 3 4 所以 我怎样才能实现它 for eg public Blocks int code bool shp1 switch code case 1 this W
  • 玩具外壳管道不正确

    我不会撒谎 这是一个家庭作业问题 然而 就我而言 积分已经消失了 现在 我只是在寻找答案 因为我想我可能疯了 该程序的目标是执行命令ps A grep inputstring wc l其方式与 shell 的操作方式类似 因此 我生成进程
  • 如何使用 UserManager 在 IdentityUser 上加载导航属性

    我已经延长了IdentityUser包含用户地址的导航属性 但是当让用户使用UserManager FindByEmailAsync 导航属性未填充 ASP NET Identity Core 是否有某种方法来填充导航属性 例如实体框架的导
  • Java - 二维数组检查对角线数字板

    目前我正在开发一个在 8x8 2D 阵列板中生成随机 0 和 1 的程序 我要做的是检查对角线上的所有数字是否相同 从角开始 而不仅仅是任何对角线 example int array 0 0 0 0 0 0 0 1 0 0 1 0 1 0
  • VS Code 无法正确设置断点

    我正在尝试调试一个小项目 但无法让 Chrome 扩展调试器完全工作 当我放置断点时 它会移到我想要调试的函数之外 我正在使用 webpack babel 我的项目托管在 Net 平台 特别是 DNN 上 包 json name disab
  • InputDispatcher:由于输入调度被禁用而丢弃事件

    我正在为 Android 开发 ui 自动化平台 由于某种原因 有时 非常罕见 点击事件可能会被删除 当它发生时我在日志中看到 I InputDispatcher 2707 Dropped event because input dispa
  • VS2010,F5 - 构建但不运行(WPF)

    我们刚刚将 WPF 应用程序转换为 VS2010 当我按 F5 时 解决方案会构建 但随后不会运行 如果我执行 CNTL F5 无需调试即可启动 应用程序运行得很好 有任何想法吗 谢谢 杰夫 不知道那是什么 删除 suo文件 关闭VS201
  • 根据显示器分辨率缩放网站?

    我正在寻找一个 JavaScript 来根据浏览者的屏幕分辨率更改网站的缩放 我在桌面上制作了 1920x1080p 的网站 html moz transform scale 0 75 0 75 zoom 0 75 zoom 75 我在我的
  • 无法通过 JNDI 查找 OSGI 服务

    我正在使用 JBossAS7 我的应用程序有一些 OSGI 模块和大型非 OSGI 部分 我尝试通过 JNDI 在非 osgi 子系统中查找 osgi 服务 但它们不存在于 JNDI 上下文中 我发现类似的问题JBOSS 7 JNDI 树中
  • 在程序集中搜索所有子类型?

    我想找到从基 接口继承的所有类型 有人有一个好的方法来做到这一点吗 有想法吗 我知道这是一个奇怪的请求 但我仍然在玩它 使用 Assembly GetTypes 获取所有类型 并使用 Type IsAssignableFrom 检查继承 如
  • 通过 Android Intent 共享位图

    在我的 Android 应用程序中 我有一个位图 比如 b 和一个按钮 现在 当我单击按钮时 我想共享位图 我正在使用下面的代码onClick 为了达成这个 Intent intent new Intent Intent ACTION SE
  • Bash 脚本 - 自动填写答案

    我有一个 bash 脚本 其中有几个问题 是否可以自动填写答案 script sh install 按顺序回答y 2 1 n n 我怎样才能在 bash 中做到这一点 编辑 是否可以只通过第一个答案 echo y install 并让用户选
  • C++ - 重复使用 istringstream

    我有一个代码用于读取在线存储的浮点数文件 如下所示 3 34 2 3409 1 0001 1 1 我想使用 istringstream 阅读它们 但它并不像我预期的那样工作 string row string strNum istrings
  • ios8 中 iphone 的 UIPopoverController 显示白屏

    在 iphone 中使用 ios8 0 以下的 UIPopovercontroller 可以正常使用此代码 但在ios8中却显示白屏 Code pickerController UIViewController alloc init UIV
  • CSS 伪元素上的事件侦听器,例如 ::after 和 ::before?

    我有一个div带有 CSS 伪元素的元素 before用作关闭按钮 而不是使用实际按钮 如何应用事件侦听器only伪元素 HTML div div CSS box before background image url close png