当子元素悬停时，如何在不使用父选择器的情况下设置父元素的样式？

在没有父级选择器的情况下为子级悬停时的父级元素设置样式

在 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中文网其他相关文章！