raulbaros raulbaros - 1 month ago 13
CSS Question

Change font color of H2 inside div upon hover-over

I am trying to change the font-color of

h2
inside a
well
when hover-over. The background-color changes correctly, but at the same time I also need the font-color of h2 to change into white.
How to do this?



.well.sb:hover {
color: #FFF;
background-color: blue;
}

.well.sb {
background-color:green;
width:400px;
height:200px;
}

h2 {
color:yellow;
}

.flag {
background-color:#000;
color:red;
}

<div class="well sb">
<h2>This text should change color and become white on hover-over</h2>
<div class="flag">FLAG</div>
</div>




Answer

Add this rule:

.well.sb:hover h2{
  color: #FFF;
}

.well.sb:hover {
  color: #FFF;
  background-color: blue;
}
.well.sb {
  background-color: green;
  width: 400px;
  height: 200px;
}
h2 {
  color: yellow;
}
.flag {
  background-color: #000;
  color: red;
}

.well.sb:hover h2{
  color: #FFF;
}
<div class="well sb">
  <h2>This text should change color and become white on hover-over</h2>
  <div class="flag">FLAG</div>
</div>