CSS 触发悬停仅适用于顶部元素

Question

是否有优雅的解决方案只悬停在顶部元素上，而不是底层元素？或者我应该使用 javascript 来执行此操作？

<div class="WithHover1">
   <div class="WithHover2">
       I am Top and I want to be the only div hightlighted
   </div>
   I want to be hightlighted too, but I dont want to be hightlighted when the nested one is
</div>

Answer 1

您还不能仅在 CSS 中执行此操作。 has 选择器在 4/5 级(我忘记了)CSS 选择器的草案中，这会很棒。

目前，javascript/jquery 将是最简单实用的方法。

$(".WithHover2").mouseover(function() {
    $(".WithHover1").removeClass("highlight");
    $(this).addClass("highlight");
});