CSS Pseudo Class hover properties

Question

I'm trying to change the color of text to "white" when mouse is hovered on the background image or when its hovered on the div. I know that I'd have to use Pseudo class combination for this but just can't figure it out. Its got to be something very simple I know.

Here's the code.

.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

If you detect the hover on the .bigbox div, you can easily apply style for any descendant of the 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

There is no "previous sibling" selector. To make h2 tag white color, you can use Steven Manuel solution.

On a related note, ~ is for general successor sibling (meaning the element comes after this one, but not necessarily immediately after) and is a CSS3 selector. + is for next sibling and is CSS2.1.

More details on Is there a “previous sibling” CSS selector? and css3_gen_sibling

Check my demo for CSS selector previous sibling here: https://jsfiddle.net/x7kqveky/

Hope this help.

Answer 3

Try Something like this.

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

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