CODEWITHSUNDEEP
htmlcss
shutupchigo
shutupchigo

Reputation: 709

CSS Pseudo Class hover properties

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>

Upvotes: 0

Views: 75

Answers (3)

Steven Manuel
Steven Manuel

Reputation: 1978

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>

Upvotes: 3

Ajay Gupta
Ajay Gupta

Reputation: 2967

Try Something like this.

.a:hover + .b {
    color: red;
}
<div class="a">First Div</div>
<div class="b">Second Div</div>

Upvotes: 0

Huy Nguyen
Huy Nguyen

Reputation: 2070

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.

Upvotes: 0

Related Questions