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>

Answer 2

没有“上一个兄弟”选择器。要使h2标签为白色，您可以使用Steven Manuel解决方案。

在相关的注释中，~用于一般继承兄弟（意思是元素在此之后，但不一定紧接在之后）并且是CSS3选择器。 +代表下一个兄弟，是CSS2.1。

有关Is there a “previous sibling” CSS selector?和css3_gen_sibling

的更多详情

在我的演示中查看CSS选择器上一个兄弟：https://jsfiddle.net/x7kqveky/

希望得到这个帮助。

Answer 3

尝试这样的事情。

.a:hover + .b {
    color: red;
}

<div class="a">First Div</div>
<div class="b">Second Div</div>

CSS Pseudo Class悬停属性

3 个答案: