How to make divs appear and disapear on hover in css?

Question

I have multiple divs that show an image, and when someone hovers one of the images a div that correspondes with that image will appear. I have it half working, but only the right most item works, the rest do nothing.

CSS:

.csshover {
    display: none;
    float: left;
    width: 100%;
}

#cssimage {
    float: left;
    width: 20%;
}

#cssimage:hover + .csshover {
    display: block;
}

.htmlhover {
    display: none;
    float: left;
    width: 100%;
}

#htmlimage {
    float: left;
    width: 20%;
}

#htmlimage:hover + .htmlhover {
    display: block;
}

HTML:

<div id="cssimage">
     <img src="files/images/css3.jpg"/>
</div>


<div id="htmlimage">
     <img src="files/images/html5.jpg"/>
</div>

<div class="htmlhover">html Test message</div>
<div class="csshover">CSS 3 Test message</div>

Check that answer: http://stackoverflow.com/questions/19062120/make-a-div-appear-on-hover-over-another-div — cProg, Aug 28 '15 at 19:11

Terry · Accepted Answer · 2015-08-28T19:15:32.133

3

That is because you are using +, which is the immediate sibling selector. Since .csshover is not an immediate sibling of #cssimage, #cssimage:hover + .csshover will not return the element you intended to select.. Use ~, the general sibling selector instead, i.e.: #cssimage:hover ~ .csshover:

.csshover {
  display: none;
  float: left;
  width: 100%;
}
#cssimage {
  float: left;
  width: 20%;
}
#cssimage:hover ~ .csshover {
  display: block;
}
.htmlhover {
  display: none;
  float: left;
  width: 100%;
}
#htmlimage {
  float: left;
  width: 20%;
}
#htmlimage:hover ~ .htmlhover {
  display: block;
}

<div id="cssimage">
  <img src="http://placehold.it/200x100?text=%23cssimage" />
</div>


<div id="htmlimage">
  <img src="http://placehold.it/200x100?text=%23htmlimage" />
</div>

<div class="htmlhover">html Test message</div>
<div class="csshover">CSS 3 Test message</div>

edited Aug 28 '15 at 19:15

answered Aug 28 '15 at 19:09

Terry

63,248
15
96
118

Thank you terry! I'm currently attending school for web development and this is just a project we are working on and I have been stuck trying to get this to work for hours! This worked perfectly! – Joey Stout Aug 28 '15 at 19:14
1

@JoeyStout Glad that I helped. Also one peculiarity to note: both `+` and `~` sibling selectors only work **downstream**, i.e. they will not select siblings that occur before the element, but only after. But it also makes sense, because CSS (*cascading* stylesheets) only flows in one direction and not the other, and does not traverse against the DOM structure (both on the same level, i.e. towards previous siblings, and up the DOM tree, i.e. towards parent(s)). – Terry Aug 28 '15 at 19:17

score 0 · Answer 2 · answered Aug 28 '15 at 19:09

0

Html

<div class="wrapper">
    <div class="toggle-it">Some content</div>
</div>

Style

div.toggle-it{
   display : none;
}

.wrapper{
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.wrapper:hover.wrapper div.toggle-it{
   display : block;
}

This is just an example . You can simply wrap your code into this pattern. Hope it will be helpful.

answered Aug 28 '15 at 19:09

Ashot

1,229
1
12
13

I need the toggle-it div to be separate from the wrapper div, for styling purposes. – Joey Stout Aug 28 '15 at 19:11
@JoeyStout anyway all your html elements has parent element, so you can change hover selector by any of them. – Ashot Aug 28 '15 at 19:15

score 0 · Answer 3 · answered Aug 28 '15 at 19:09

The + CSS selector selects only elements directly adjacent to the target that it's modifying. What you want to use instead is the ~ CSS selector, which will select all elements that come afterwards.

For more information see this CSS selector reference.

Live Demo:

.csshover {
    display: none;
    float: left;
    width: 100%;
}

#cssimage {
    float: left;
    width: 20%;
}

#cssimage:hover ~ .csshover {
    display: block;
}

.htmlhover {
    display: none;
    float: left;
    width: 100%;
}

#htmlimage {
    float: left;
    width: 20%;
}

#htmlimage:hover ~ .htmlhover {
    display: block;
}

<div id="cssimage">
     <img src="files/images/css3.jpg"/>
</div>


<div id="htmlimage">
     <img src="files/images/html5.jpg"/>
</div>

<div class="htmlhover">html Test message</div>
<div class="csshover">CSS 3 Test message</div>

JSFiddle Version: https://jsfiddle.net/jtaa41da/

score 0 · Answer 4 · answered Aug 28 '15 at 19:15

I don't know if you wanna call this "Answer", but after 5 minutes of pure trying around I had this Code in JSFiddle:

#output {
    position: fixed;
    top: 100px;
    left: 0px;
    width: auto;
    height: auto;
}

#cssimage {
    float: left;
    width: 20%;
}

#cssimage:hover + #output:before {
    content: "CSS Hover"
}

#htmlimage {
    float: left;
    width: 20%;
}

#htmlimage:hover + #output:before {
    content: "HTML Hover"
}

<img id="htmlimage" src="files/images/html5.jpg"/>
<div id="output"></div>
<img id="cssimage" src="files/images/css3.jpg"/>
<div id="output"></div>

This is a pretty wierd logic... but it works! :D

Yes, I have a 2 #output's which should be an error. – Sainan Aug 28 '15 at 19:16 — Sainan, Aug 28 '15 at 19:16

How to make divs appear and disapear on hover in css?

4 Answers4