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

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

虽然 CSS 缺乏专用的父级选择器，但仍然可以在子级时设置父级元素的样式元素悬停。在这种情况下，我们的目标是当容器元素包含的 删除 按钮悬停在其上时突出显示该元素。

考虑 HTML 标记：

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

没有父级选择器，我们可以利用伪包装器的概念来达到预期的效果。通过设置pointer-events: none;在父元素和指针事件上：auto；在子元素（伪包装器）上，我们可以创建一个触发机制。

这是实现此功能的 CSS 代码：

div.parent {  
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}

div.parent:hover {
    background: yellow;
}

注意：确保子元素拥有自己的事件侦听器将指针事件设置为自动以维持单击功能。

以上是如何在不使用父选择器的情况下为子级悬停时的父元素设置样式？的详细内容。更多信息请关注PHP中文网其他相关文章！