在悬停时更改div内部H2的字体颜色

Question

我正在尝试在悬停时更改h2内well的字体颜色。背景颜色正确变化，但同时我还需要h2的字体颜色变为白色。 怎么做？

 .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 1

添加此规则：

.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>

Answer 2

应该是.class＆gt; tag：pseudotag

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

Answer 3

您可能需要查看此子链接以了解父子悬停概念：

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