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

Posted 2023-05-08

【中文标题】悬停时更改 div 内 H2 的字体颜色

【英文标题】：Change font color of H2 inside div upon hover-over

【发布时间】：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>

【参考方案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