Hover div to change another div is not working

Question

When I hover over the button, the div does not change the color of the book div. I can't understand it.

.book {
  height: 100px;
  width: 100px;
  background-color: blue;
}

.button {
  height: 40px;
  width: 100px;
  background-color: black;
  color: white;
}

.button:hover .book {
  background-color: pink;
}

<div class="book">
  BOOK
</div>
<div class="button">
  BUTTON
</div>

You've attempted to use a descendant selector, but `.book` isn't inside `.button`. Also, there are no previous sibling selectors in CSS. You need to restructure or use JavaScript. — isherwood, Sep 01 '21 at 15:50

score 1 · Answer 1 · edited Sep 01 '21 at 15:50

1

A solution with Javascript:

function chbg(color) {
  document.getElementById('book').style.backgroundColor = color;
}

<div id="book">Div book</div>
<div id="button" onmouseover="chbg('red')" onmouseout="chbg('white')">Div button</div>

edited Sep 01 '21 at 15:50

isherwood

58,414
16
114
157

answered Sep 01 '21 at 15:39

Asif

166
9

1

Nice, but event handlers would be better than inline JavaScript. – isherwood Sep 01 '21 at 15:51

Hover div to change another div is not working

1 Answers1