使用Sass引用父伪选择器。

Question

这就是我想在纯CSS中做的事情。请注意，我只想悬停应用于.parent:hover而不是任何包含:hover的父级。

＆＃13;

＆＃13;

.container {
  padding: 1em;
  border: solid 1px black; 
 }

.parent {
  position: relative; 
  width: 3em;
  height: 3em; 
  background-color: #4d4;
}

.child {
  position: absolute; 
  right: 0; 
  top: 0;
  height: 1em;
  width: 1em; 
  background-color: red; 
  opacity: 0; 
  transition: opacity 0.5s linear; 
}

.parent:hover .child {
  opacity: 1.0;
}

＆＃13;

<div class = "container"> 
    <div class = "parent"> 
      <div class = "child"/> 
    </div>
</div> 

＆＃13;

＆＃13;

＆＃13;

问题是我在SCSS中如何做到这一点？

即。如果我的SCSS看起来像：

.container {
    //... 
}

.parent {
   //... 

   .child {
      //..
      opacity: 0; 
      transition: opacity 0.5s linear; 

      //Hover selector here? 
   }
}

我一直在玩Sassmeister，但我无法让它发挥作用。

Answer 1

您的.parent选择器：

.parent {
  position: relative; 
  width: 3em;
  height: 3em; 
  background-color: #4d4;

  &:hover {
    .child {
      opacity: 1.0;
    }
  }
}