使用Sass引用父伪选择器。

Question

这是我想要在纯CSS中做的事情。请注意，我只想悬停适用于.parent:hover，而不是任何家长:hover。

.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; 
 
}

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

的问题是如何在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; 
    } 
    } 
}