How can I change the style of a component when its parent is hovered?

Question

So I am using sass/scss and I need to change the style of a component when its parent is hovered.

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

And I mean to do something like:

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

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

Got it? That's the idea, when .choose-profile-card is hovered, I need to change the style of .btn-flat--within , is there a way to do this?

Answer 1

It should work as is. The issue may be because the <div className="btn-flat--within" /> has no content in it. try <div className="btn-flat--within" >some text</div> or adding a height to the btn-flat--within class

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