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?
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>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments