CSS :悬停在子选择器上

Question

我有这个HTML:

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

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

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

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

}

但这行不通

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

Answer 1

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

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

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

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

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

CSS :悬停在子选择器上

CSS :hover on child selector

html

css

css-selectors