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 {
    }
}

无法使用悬停工作，尝试过＆amp; +＆amp;，@ at-root。

Answer 1

这可以通过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"});
  }
);

Answer 2

很抱歉，但从CSS的角度来看，无法选择父级的兄弟姐妹，因为CSS不允许您以这种方式在选择树上方看到。

现在使用JavaScript / jQuery是最好的方法，这是一个例子：

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

要明确这种方法，可以依靠它，因为单靠CSS无法达到预期的效果。

当兄弟姐妹第一个孩子盘旋时改变班级

2 个答案: