How to have multiple stateful components together that all react to hover?

Let's say I'm designing a table. When the user hovers a table row, it get's highlighted. There is a button inside each table row, that only appears when hovering the row. Obviously, if you hover on that button, it gets a hover state.

 

How do I do that?

 

I can have table rows react to hover states and buttons, but not not both. If I hover the button that appeared due to hovering the table row, the button doesn't respond to hovering.