How to correctly change a child block when hovering over a parent block in BEM?

Question

BEM

There is a block block. There is a button in the block - also a separate button block. According to BEM, how to change the state of a button when hovering over the parent block block? .block:hover .button is not correct. Substitute class for button when hovering over parent using js?

Answer 1

for example like this:

<div class="block">
  <div class="block__button button"></div>
</div>

.block:hover .block__button {...}