Change the style of element B during the hover event to A

Question

How do you change the style of element B when you move the mouse over element A if element A is in the DOM below element B?

In example:

<div id="B">Text</div>
<button id="A">Btn</button>

Below not working:

#A:hover + #B {color: red;}
#A:hover ~ #B {color: red;}
#A:hover #B {color: red;}

Answer 1

EDIT: Ok, this answer is now not right as the question has been modified. (Mistake from the author).

You have to invert your ids to have this : #B:hover + #A {color: red;}

Because its "When hovering #B target the next element #A and add color: red;"

#B:hover + #A {color: red;}

<div id="B">Text</div>
<button id="A">Btn</button>