悬停时更改 div 内 H2 的字体颜色答案

【问题标题】：Change font color of H2 inside div upon hover-over悬停时更改 div 内 H2 的字体颜色
【发布时间】：2017-02-24 23:04:31
【问题描述】：

我试图在悬停时更改well 内的h2 的字体颜色。背景颜色正确更改，但同时我还需要 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>

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

【解决方案2】：

应该是.class > tag:pseudotag

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

【讨论】：

【解决方案3】：

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

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

【讨论】：