CSS Hover on Div Container; Display Image

Question

I need an image to appear when the overall container is hovered. I've tried accessing the class directly on the image and I've tried nesting the image in a div with no success. I have a feeling it is regarding the selectors ~, >, etc. but I cannot track this down for the life of me.

Here is my HTML Code:

<div class="container">
  <div class="info">
    <div class="sigma">
      <img src="http://www.wrightslaw.com/blog/wp-content/plugins/wpdiscuz/assets/img/plugin-icon/icon_info.png" align="right" style="margin: 7px 0;"  />
    </div>      
  </div>
  <div id="chart1" style=""></div>
</div>

Here is the CSS:

.container {
  width: 300px; 
  height: 300px; 
  background-color: #eceded; 
  position: relative;
}

.info {
  width: 290px; 
  height: 30px;
}

.sigma {
  display: none;
}

.container:hover~.sigma{
    display: block;
}

I also have a JSFiddle: http://jsfiddle.net/sthompson/eovn8o3p/2/

j08691 · Accepted Answer · 2016-02-12 22:07:49Z

2

Remove the general sibling selector, ~

jsFiddle example

.sigma is a descendant (grandchild) of .container and ~ only applies to siblings. If for some reason you need to enforce the hierarchy, you could also use .container:hover > div.info > .sigma.

answered Feb 12, 2016 at 22:07

j08691

209k33 gold badges269 silver badges281 bronze badges

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

1 Comment

Adam Buchanan Smith Over a year ago

better answer w/ explanation and fiddle :)

GolezTrol · Accepted Answer · 2016-02-12 22:07:39Z

2

sigma is not a sibling of the container, so the ~ combinator in your selector is not appropriate. Neither is it an immediate child, so you should use just a simple selector instead:

.container:hover .sigma {

Updated fiddle

answered Feb 12, 2016 at 22:07

GolezTrol

116k19 gold badges186 silver badges215 bronze badges

3 Comments

GolezTrol Over a year ago

@AdamBuchananSmith And fiddle! Just not bold :o)

Adam Buchanan Smith Over a year ago

oh lol yeah you are right! I up-voted you both anyways (that's what counts)

Adam Buchanan Smith Over a year ago

better answer w/ explanation and fiddle :)

Adam Buchanan Smith · Accepted Answer · 2016-02-12 22:10:15Z

1

I think this is what you are looking for: http://jsfiddle.net/eovn8o3p/5/

.container:hover .sigma{
    display: block;
}

answered Feb 12, 2016 at 22:10

Adam Buchanan Smith

9,4675 gold badges21 silver badges39 bronze badges

Collectives™ on Stack Overflow

CSS Hover on Div Container; Display Image

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related