html - CSS :hover on child selector

Question

我有这个 HTML:

<div class="container-s">
    <div class="service">
        <div class="animate-this">

        </div>
    </div>
</div>

animate-this 类可以在整个 html 中出现不同的时间。所以，这就是我想出的

.container-s .service:hover .container-s .animate-this {

}

但这行不通

任何人都可以建议与子选择器一起使用的替代方法吗？

Answer 1

在这种特定情况下，因为两个元素都是同一个容器的一部分，所以您不需要多次指定同一个容器:

.container-s .service:hover .animate-this

这会在悬停时在 .service 中找到 .animate-this，它本身在 .container-s 中。通过在那里添加额外的 .container-s，您是说 .animate-this 出现在某个内部容器中，这是不正确的。不要将这与使用逗号对多个不同 选择器进行分组相混淆，在这种情况下，您需要为每个选择器重复容器部分。在这种情况下，您只需要处理一个选择器。

---

如果 .animate-this 可以出现在与 .service 不同的容器中，那么这只有在您可以使用选择器实际表达这种关系时才能在 CSS 中实现.不幸的是，CSS 选择器的范围非常有限，尤其是无法从容器中提升以遍历到完全不同的元素。

您的真正目标是在 .service 悬停时为该元素设置动画，无论它出现在 HTML 中的什么位置。这将需要使用 JavaScript 单独查找每个元素，因为 CSS 选择器基于元素之间的具体关系进行操作。