CODEWITHSUNDEEP
htmlcss
Joey Stout
Joey Stout

Reputation: 31

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

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>

Upvotes: 2

Views: 385

Answers (4)

Paper
Paper

Reputation: 1313

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

Upvotes: 0

Terry
Terry

Reputation: 66228

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>

Upvotes: 3

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20399

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/

Upvotes: 0

Ashot
Ashot

Reputation: 1300

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.

Upvotes: 0

Related Questions