CSS：将鼠标悬停在子选择器上

Question

I have this HTML:

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

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

The animate-this class could appear different times throughout the html. so, this is what I've come up with

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

}

But this won't work

Can anyone please suggest an alternative way alongside the child selectors?

Answer 1

In this specific case, because both elements are part of the same container you do not need to specify the same container more than once:

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

This finds .animate-this within .service on hover, itself within .container-s . By having the additional .container-s there you are saying that .animate-this appears within some inner container, which is incorrect. This is not to be confused with grouping several distinct selectors using a comma, in which case you will need to repeat the container portion for each selector. In this case, you're only dealing with one selector.

---

If .animate-this can appear in a different container than .service , then this would only be possible in CSS if you could actually express this relationship using a selector. Unfortunately CSS selectors are very limited in their scope, in particular there is no way to ascend from a container in order to traverse to a completely different element.

Your real objective is to animate this element when .service is hovered regardless of where it appears in the HTML . This would require using JavaScript to find each element separately, as CSS selectors operate based on concrete relationships between elements.