悬停兄弟姐妹第一个孩子时改变班级[重复]

Question

说我有：

<div class="block-one"></div>
<div class="block-two">
    <div></div>
    <div></div>
    <div></div>
</div>

当block-two 的第一个孩子悬停时，我想更改block-one 的css。如何使用 SASS/SCSS 来完成？我试过了：

.block-two {
    div:first-child:hover {
    }
}

悬停无法使用任何东西，已尝试 & + &，@at-root。

Answer 1

很抱歉，从 CSS 的角度来看，选择父级的兄弟是不可能的，因为 CSS 不允许您以这种方式看到选择树的上方。

然而，使用 JavaScript/jQuery 是目前最好的方法，这里有一个例子：

$(".block-two > :first-child").hover(function(){
    $(".block-one").css("color", "red");
});

要明确这种方法，可以依赖它，因为您将无法仅通过 CSS 实现这种预期效果。

Answer 2

这可以通过 jQuery 轻松完成：

$(".block-two").hover(
  function() {
    //Mouse is over the element
    $(".block-one").css({"background-color": "#333"});
  },
  function() {
    //Mouse left the element
    $(".block-one").css({"background-color": "#fff"});
  }
);