如何在父元素悬停时更改组件的样式？

Question

所以我使用的是sass / scss，我需要在其父级悬停时更改组件的样式。

<Card className="choose-profile-card"
      onClick={() => this.handleChangeCardSelection('investor')}>
   <div className="btn-flat--within" />
</Card>

我的意思是做一些像：

.choose-profile-card {
    &:hover {
      box-shadow: 0px 0px 20px -1px rgba(0, 0, 0, 0.1);

      .btn-flat--within {
         background-color: red;
      }
    }
}

得到它了？ 这就是想法，当.choose-profile-card徘徊时，我需要改变.btn-flat--within的风格.btn-flat--within ，有没有办法做到这一点？

Answer 1

它应该按原样运作。 问题可能是因为<div className="btn-flat--within" />中没有内容。 尝试<div className="btn-flat--within" >some text</div>或向btn-flat--within添加高度btn-flat--within课堂btn-flat--within

jsfiddle： https ：//jsfiddle.net/f1uz0sah/