悬停其父时如何更改组件的样式?

时间:2019-04-08 19:26:22

标签: javascript css reactjs css3 sass

所以我正在使用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的样式,有没有办法做到这一点?

1 个答案:

答案 0 :(得分:0)

它应该可以正常工作。问题可能是因为<div className="btn-flat--within" />中没有内容。尝试<div className="btn-flat--within" >some text</div>或向btn-flat--within类添加高度

jsfiddle:https://jsfiddle.net/f1uz0sah/