html - CSS 伪类悬停属性

Question

当鼠标悬停在背景图像上或鼠标悬停在 div 上时，我试图将文本颜色更改为“白色”。我知道我必须为此使用 Pseudo 类组合，但就是想不通。它必须是我知道的非常简单的东西。

这是代码。

.bigbox {
 border-bottom: 6px solid #00a37a;
  position:relative;
  

}
.bigbox:hover {
  border-bottom: 6px solid #ee5630;
  
}

.h2title {
 padding-left:70px;
  margin-top:200px;
  position:absolute;
  z-index:11;
  color:black;
  text-decoration:none;
  
}

.img2 {
  opacity:0.2;
  margin-bottom:5px;
}

.img2:hover {
  opacity:0.9;
  margin-bottom:5px;
}

.img2 + h2title:hover {
  color:white;
}

<div class="bigbox">
    <a class="h2title" href="#"> <h2> Some Text</h2></a>
  <center>
      <img class ="img2" src="http://www.adweek.com/files/imagecache/node-blog/blogs/istock-unfinished-business-hed-2015.jpg" />
  </center>
</div>

Answer 1

如果您检测到悬停在 .bigbox div 上，您可以轻松地为 div 的任何后代应用样式。

.img2 {
    /*simplified for this demo*/
    opacity:0.2;
}
.h2title {
    /*simplified for this demo*/
    position: absolute;
    z-index: 11;
    color:black;
    margin: 50px;
    text-decoration:none;
}

.bigbox:hover .img2 {
    opacity:0.9;
}

.bigbox:hover .h2title {
    color:white;
}

<div class="bigbox"><a class="h2title" href="#"> <h2>Some Text on this guy's head</h2></a>
    <img class ="img2" src="http://www.adweek.com/files/imagecache/node-blog/blogs/istock-unfinished-business-hed-2015.jpg" />
</div>