Q: How to change color on every element in div when hovering? I am trying to change the color of content, including h4 title, when hovering over div but the title does not get white colored. Don't know how I can achieve this:


.iconbox-blue {
  background: #fff;
  color: #000;
}

.iconbox-blue:hover {
  color: #fff;
  background: blue;
}
<div class="iconbox-blue">
  <a href=''>
    <h4 class="icon-box-title">Header</h4>
  </a>
  <p class="icon-box-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
</div>


What am I doing wrong? How can I make the h4 title color white when hovering over iconbox-blue div?

A: You just need to simply add a hover effect that changes the anchor-element.
As anchor tag does not inherit attributes like if an href attribute is present.
.iconbox-blue:hover a{
  color: #fff;
}



.iconbox-blue {
  background: #fff;
  color: #000;
}

.iconbox-blue:hover {
  color: #fff;
  background: blue;
}
.iconbox-blue:hover a{
  color: #fff;
}
<div class="iconbox-blue">
  <a href=''>
    <h4 class="icon-box-title">Header</h4>
  </a>
  <p class="icon-box-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
</div>



A: Add one additional style for the H4:
.iconbox-blue:hover,
.iconbox-blue:hover h4 {
   color: #fff;
   background: blue;
}

