CSS：悬停在孩子选择

我有这样的HTML：CSS：悬停在孩子选择

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

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

的动画，这一类可以在整个HTML出现不同的时间。所以，这是我想出来的

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

}

但是，这是行不通的

任何人都可以请建议旁边的孩子选择一个替代方式？

来源

2015-02-08 iamabin

目前尚不清楚你想要完成什么。 – BoltClock 2015-02-08 08:30:25

尝试从您的CSS规则中删除其中一个.container -s – mindparse 2015-02-08 08:30:39

@BoltClock我想在'hover'之后使用子选择器。可能吗？ – iamabin 2015-02-08 08:32:32

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

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

此发现.animate-this内.service上悬停，本身.container-s。通过额外的.container-s那里你说.animate-this出现在一些内部容器内，这是不正确的。这不要与使用逗号分组的几个不同的选择器相混淆，在这种情况下，您需要重复每个选择器的容器部分。在这种情况下，你只处理一个选择器。

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

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

来源

2015-02-08 08:44:17 BoltClock

CSS：悬停在孩子选择

回答

相关问题