Bethfiander Bethfiander - 3 months ago 10
CSS Question

Hover Text Make Div Change Colour - CSS

I am having trouble making a div change background colour when text is hovered.

I am using an absolute position for the div.book with an absolute value of text over it so the text hovers over the div, text on z-index 3 and div on 2.

When I hover the div the whole background changes, however the text is covering most the div and when its hovered nothing changes so I tried:



h1:hover + div.book {
background-color: rgba(333, 33, 33, 1);
}

.book {
height: 50px;
}

<h1>Book</h1>
<div class="book"></div>





But I can't seem to get it to work?

Any Ideas?

Thanks in advance!

Answer

Place the h1 inside the <div></div>. The 2 elements will now overlap eachother. Add width to .book. And finally set the color (=textcolor) transparent so no letters will be displayed.

h1:hover {
  background: red;
  color: rgba(0, 0, 0, 0);
}

.book {
  height: 50px;
  width: 200px; 
  }
<div class="book">
  <h1>Book</h1> 
</div>