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>

Steven Manuel · Accepted Answer · 2016-07-15 06:12:41Z

3

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>

edited Jul 15, 2016 at 6:12

answered Jul 15, 2016 at 2:01

Steven Manuel

1,9881 gold badge18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:51:27Z

0

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.

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Jul 15, 2016 at 2:18

Huy Nguyen

2,0703 gold badges28 silver badges38 bronze badges

Comments

Ajay Gupta · Accepted Answer · 2016-07-15 05:36:16Z

0

Try Something like this.

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

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

answered Jul 15, 2016 at 5:36

Ajay Gupta

2,98725 silver badges28 bronze badges

Collectives™ on Stack Overflow

CSS Pseudo Class hover properties

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related