Change font color of H2 inside div upon hover-over

Question

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>

score 2 · Accepted Answer · answered Oct 15 '16 at 16:19

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>

score 0 · Answer 2 · answered Oct 15 '16 at 16:19

0

Should be .class > tag:pseudotag

.well.sb > h2:hover {
   color:white;
 }

answered Oct 15 '16 at 16:19

ScaisEdge

131,976
10
91
107

score 0 · Answer 3 · edited May 23 '17 at 10:32

0

You might want to check this link for parent child hover concept:

CSS :: child set to change color on parent hover, but changes also when hovered itself

edited May 23 '17 at 10:32

Community

1
1

answered Oct 15 '16 at 16:25

user3677355

27
5

Change font color of H2 inside div upon hover-over

3 Answers3