在没有父级选择器的情况下为子级悬停时的父级元素设置样式
在 CSS 中,基于子级交互直接定位父级元素具有挑战性,因为缺少父选择器。然而,有一个聪明的解决方法可以让我们实现这种效果:在父元素中创建一个伪包装器。
考虑给出的示例,其中删除按钮在悬停时突出显示其父部分:
<div> <p>Lorem ipsum ...</p> <button>Delete</button> </div>
为了突出显示父部分,我们将创建一个子 div,并将指针事件设置为 auto,同时禁用它parent:
div.parent { pointer-events: none; } div.child { pointer-events: auto; }
现在,父级对鼠标事件变得透明,允许子级 div 触发悬停效果。当子元素上发生悬停事件时,我们可以根据需要设置父元素的样式:
div.parent:hover { background: yellow; }
此技术可确保父元素响应其子元素上的悬停交互,从而有效地模拟父选择器的行为。请注意,应该为具有事件侦听器的其他子元素恢复pointer-events: auto,以维持其功能。
以上是当子元素悬停时,如何在不使用父选择器的情况下设置父元素的样式?的详细内容。更多信息请关注PHP中文网其他相关文章!