悬停子元素时如何设置父元素的样式?

2023-11-24

我知道不存在CSS 父选择器,但是在没有这样的选择器的情况下悬停子元素时是否可以设置父元素的样式?

举个例子:考虑一个删除按钮悬停时将突出显示即将删除的元素:

<div>
    <p>Lorem ipsum ...</p>
    <button>Delete</button>
</div>

通过纯CSS,如何改变鼠标悬停在按钮上时该部分的背景颜色?


我知道这是一个老问题,但我只是设法在没有伪子项(但伪包装器)的情况下做到了这一点。

如果您将父级设置为没有pointer-events,然后是一个孩子div with pointer-events set to auto, 有用:)
注意<img>标签(例如)并不能解决问题。
还记得设置pointer-events to auto对于其他有自己的事件侦听器的子项,否则他们将失去单击功能。

div.parent {  
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}

div.parent:hover {
    background: yellow;
}    
<div class="parent">
  parent - you can hover over here and it won't trigger
  <div class="child">hover over the child instead!</div>
</div>

Edit:
As 暗影巫师温馨提示:值得一提的是,这不适用于 IE10 及以下版本。 (旧版本的 FF 和 Chrome 也是如此,请参阅here)

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

悬停子元素时如何设置父元素的样式? 的相关文章

  • 将 2 个 Div 垂直居中另一个 Div

    我有 2 个 div 我想将它们垂直居中在另一个 div 内 目前我有 http jsfiddle net 5vpA3 1 http jsfiddle net 5vpA3 1 现在我明白这里发生了什么 但我希望左侧 div 在该容器内垂直对
  • Canvas GetImageData() / PutImageData() 在移动设备上的性能很糟糕

    我正在做一个小型 HTML5 游戏 在地图开头加载精灵时 我使用 GetImageData 循环遍历所有图像 PutImageData 进行一些处理 这在我的电脑上运行得非常好 但是在我的手机上却慢得可怕 PC 5 6 ms iPhone
  • 比例背景图像

    我想放大和缩小页面中的背景图像 我尝试过多种方法 但似乎没有一种方法能按照我想要的方式工作 我的页面的网址是http quaaoutlodge com drupal 7 14 http quaaoutlodge com drupal 7 1
  • 除非我在 HTML 中使用 标签加载图像,否则背景图像不会显示在 CSS 中

    我非常困惑为什么我的代码无法正确显示图像 这是我的代码 div p p div 只有图像的一小部分与文本一起显示 我很困惑为什么会发生这种情况 显示整个图像的唯一方法是在图像周围添加近 170 像素的填充 请有人帮忙 Thanks 你之前需
  • 更改链接悬停时的正文背景颜色

    当鼠标悬停在页面上时如何更改页面背景a 我正在寻找仅 css 的解决方案 我知道你可以通过 css 到达子元素 但我不知道如何 是否可以到达主体 看看这个DEMO http jsfiddle net bhavuksuthar bjsvhze
  • 您可以使用 JavaScript 触发自定义 HTML5 表单错误吗?

    如果我有一个像这样的输入
  • CSS 中的 * 有什么作用?

    明星是做什么的 这叫什么 对我来说 这是某种通配符 它叫什么名字 以便我可以阅读它 div zoom 1 this zoom 1 display inline display inline and this whats the differ
  • HTML 覆盖高度覆盖整个可见页面

    我有一个使用 AJAX 加载一些内容的网页 我想在加载过程中显示带有加载指示器的覆盖层 以便用户无法与页面的大部分内容交互 除了顶部的菜单 我正在使用 jQuery 和jQuery BlockUI 插件 http malsup com jq
  • Youtube 播放器 Iframe,在 Firefox 上有声音但没有视频

    我正在使用 YT Player API 在滑块内创建多个 iframe youtube 视频 第一个视频在 onYouTubeIframeAPIReady 之后调用 当我单击正常工作的下一个按钮时 会出现下一个视频 但是当我尝试在 Fire
  • 父>子CSS选择器

    我经常使用这个CSS选择器parent gt child 我的设计在 Mozilla 和 Opera 中看起来不错 但在 IE 中 就很糟糕了 我知道 gt 在 IE 中无法识别 但是 IE 中的替代方案是什么 一种替代方法是使用通用选择器
  • 只需编辑 .css 即可更改

    有 4 div class myField 每一个都在另一个之下 http jsfiddle net urielz 6Mdmd http jsfiddle net urielz 6Mdmd 我想将其视图更改为两对情侣面对面 就像结果一样 h
  • 空 URL 哈希导致页面在 js 事件上跳转

    我有一个带有下一个和上一个按钮的照片库 如果我的某个 javascript 方法由于某种原因被破坏 那么当单击其中一个按钮时 它会向 url 添加一个哈希值 即 www google com 我知道可以给散列一个 div id 来跳转到页面
  • 捕获 XSS(跨站脚本)攻击的最佳正则表达式(Java 中)?

    杰夫实际上在净化 HTML http refactormycode com codes 333 sanitize html 但他的示例是用 C 编写的 而我实际上对 Java 版本更感兴趣 有人有更好的 Java 版本吗 他的示例是否足以直
  • 使用文本遮盖视频

    是否可以使用 HTML CSS 文本来屏蔽视频 我已经找到并设置了这种工作方式 但没有一种允许文本后面有透明背景 例如 这支笔要求您进行某种填充 它并不是真正掩盖实际视频 而是创造幻觉 https codepen io dudleystor
  • 如何在粘贴时获取文本区域输入字段的新值?

    我发现当我尝试从文本区域字段读取值时onpaste调用函数时 我得到字段的旧值 粘贴操作之前的值 而不是新值 粘贴操作之后的值 以下是此行为的演示 http jsfiddle net qsDnr http jsfiddle net qsDn
  • iOS 5 中的 webkit-overflow-scrolling: touch "handle" 是否有外观 CSS 规则?

    我有一个元素恰好同时具有 webkit overflow scrolling touch 和 background color black 因此显示滚动位置的 手柄 很难看到 是否有 webkit CSS 样式规则可以改变该 手柄 的外观
  • 有没有办法防止输入 type=“number” 获得多个点值?

    我只想得到十进制值 如 1 5 0 56 等 但它允许多个点 有什么办法可以预防吗 您可以使用pattern属性
  • 通过 vh 和 vw 调整 css 字体大小

    所以我想根据容器的大小自动调整文本的大小 但是如果我使用类似的东西 font size 5vw 看起来不错 但是当我缩小页面时 高度开始变得太小 无论如何 我是否可以根据 vh 和 vw 调整文本大小 例如 如果我只是减小页面的宽度 那么高
  • 使用 jquery 提供附加功能时菜单未正确对齐

    I need to make a mega menu similar to one as show in image below 到目前为止 我已经能够在某种程度上使其发挥作用 例如jsFiddle 在这里 http jsfiddle ne
  • Bootstrap 3 多个导航栏

    我在 Twitter Bootstrap 3 中的多个引导程序中遇到问题 第一个导航栏可以正常调整大小和响应 第二个导航栏在正常分辨率下无法正常工作 但是当我尝试调整大小以响应并调整大小后 它可以正常工作 这是一些代码

随机推荐

  • 如何防止 MFMailComposeViewController 取消时崩溃?

    某处 if MFMailComposeViewController canSendMail MFMailComposeViewController email vc MFMailComposeViewController alloc ini
  • 使用 parsley.js 异步提交表单

    我正在尝试创建一个使用 Parsley js 验证前端并异步提交的表单 该表单称为 contactForm 提交按钮是 sendData 当我在空或无效表单上点击 提交 时 就会出现错误 我希望看到来自无效表单数据的 错误 警报 但它只是继
  • 如何测试另一个安装是否已在进行中?

    假设我正在尝试在 Windows 上自动安装某些内容 并且我想在尝试安装之前尝试测试是否正在进行另一个安装 我无法控制安装程序 必须在自动化框架中执行此操作 有没有更好的方法来做到这一点 一些 win32 api 而不只是测试 msiexe
  • 如何使用 Typescript 的声明与从模块导入的接口合并?

    https www typescriptlang org docs handbook declaration merging html 上面的链接提供了有关声明与接口合并的信息 我希望能够使用具有通用组件的界面来做到这一点 我目前正在使用
  • .NET 中的全局与单例

    我这里有一个很常见的情况 多年来 我一直没有发现我所做的事情是否符合行业标准 考虑一个连接到数据库的应用程序 但连接字符串不是存储在某些文件 设置中 而是作为命令行参数传递在启动时或在应用程序启动时浏览数据库 那么有必要将该连接字符串保存在
  • AppBarLayout 与嵌套片段中的 recyclerView

    由于图像总是比文字更好 我向您展示我当前的布局 工具栏 选项卡位于带有 viewPager 的 Activity xml 中 而 recyclerView 位于 viewPager 内的片段内 因此您可以向右 向左滑动来查看其他内容 我的问
  • 如何确定二进制字符串的统计随机性?

    如何确定二进制字符串的统计随机性 因此 我如何编写自己的测试 并返回与统计随机性相对应的单个值 即 0 到 1 0 之间的值 0 不是随机的 1 0 是随机的 该测试需要适用于任何大小的二进制字符串 当您使用笔和纸执行此操作时 您可能会探索
  • 什么时候调用临时的析构函数

    我想知道 C 03 和 C 11 何时调用临时的析构函数 假设我有以下情况 foo method foo f return foo void doSomething foo f method 假设我正在使用标志 fno elide cons
  • 如何以编程方式添加导航控制器?

    我使用下面的代码 但它没有加载 UIStoryboard storyboard UIStoryboard storyboardWithName Main bundle nil self mapViewController storyboar
  • 删除所有项目后组合框尺寸问题

    我的应用程序包含一个组合框 用户可以从中删除项目 当程序启动时 它会从配置文件中读取的字符串列表填充组合框 这是添加项目的代码 version list is an array of strings foreach string versi
  • 解释 Haskell 中的类型类

    我是一名 C Java 程序员 我在日常编程中碰巧使用的主要范例是 OOP 在某些线程中 我读到一条评论说 Type 类本质上比 OOP 更直观 有人可以用简单的语言解释类型类的概念 以便像我这样的 OOP 人员能够理解它吗 首先 我总是对
  • ExtJs手动触发Click事件,按钮参数与鼠标单击不同

    所以 我有一个登录控制器 你可以用鼠标单击登录或按 Enter 键 如下所示 Ext define My controller Login extend Ext app Controller init function applicatio
  • 使用节点将Token保存在本地存储中

    我正在使用智威汤逊 jsonwebtoken 5 4 0 与快递4和翡翠 我能够创建正确的令牌 但是如何在每次调用中传递此令牌 我必须在哪里存储这个令牌 在标头中还是在本地存储中 现在我将 CURL 与 Postman 一起使用 并在标头中
  • 有什么方法可以知道 Jersey @__Param fromString 处理程序中正在解析哪个参数?

    我正在使用的 API 决定接受 UUID 作为 Base32 编码字符串 而不是标准的十六进制 破折号分隔的格式UUID fromString 期望 这意味着我不能简单地写 QueryParam UUID myUuid作为方法参数 因为转换
  • 从多个位置创建脚本包

    假设我们的应用程序处于离线状态 即我们无法使用第 3 方 CDN 因此我们正在创建自己的 CDN 我想将所有供应商脚本托管在一个单独的 父级 Web 应用程序中 然后将它们包含在其他几个 MVC 应用程序的捆绑包中 e g http loc
  • 达到 MaximumFileSize 时的 log4net 滚动文件附加器文件名格式

    我们使用 log4net 滚动文件附加器 并且对日志文件有以下要求 每天开始时的新日志文件 文件名中包含日期 最大日志文件大小为 500KB 我们遇到的问题是当文件达到 500KB 时的文件命名策略 它们被重命名为 1后缀 这是有问题的 因
  • 以编程方式启用/禁用连接

    在 Windows 7 上 我可以通过网络连接管理器面板 在系统设置中 启用和禁用连接 我如何在 C 中以编程方式执行此操作 谢谢 您可以通过利用 WMI 和 Win32 NetworkAdapter WMI 类在 C 中实现此目的 Win
  • 为什么变异风格被弃用?

    0 13 和 0 14 中的文档都警告说变异样式已被弃用 但没有提及原因 不推荐在渲染之间重用和改变样式对象 如果我想对基于 css 类的动画无法处理的元素执行依赖于状态的动画 我该怎么办 每次都克隆对象 新反应 非常感谢帮助和建议 您可以
  • Python位置,显示距最近其他位置的距离

    我是数据框中的一个位置 位于经纬度列名称下方 我想在单独的数据框中显示距离最近火车站的经纬度有多远 例如 我有一个经纬度 37 814563 144 970267 并且我有一个其他地理空间点的列表如下 我想找到最近的点 然后找到这些点之间的
  • 悬停子元素时如何设置父元素的样式?

    我知道不存在CSS 父选择器 但是在没有这样的选择器的情况下悬停子元素时是否可以设置父元素的样式 举个例子 考虑一个删除按钮悬停时将突出显示即将删除的元素 div p Lorem ipsum p div