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：懸停在孩子選擇

回答

相關問題