0

I'm trying to get it so that when someone hovers over a div box it will display a separate div box below it. How would I go about doing this?

HTML:

<html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <title>Harry Kitchener - Home</title> </head> <body> <div id="center"> <div id="content"> <h1>Home</h1> <div id="product1"></div> <div id="product1hover"></div> <div id="product2"></div> <div id="product2hover"></div> <div id="product3"></div> <div id="product3hover"></div> </div> </div> </body> </html>

CSS:

#center { position: relative; margin: auto; width: 1000px; height: 600px; top: 20%; border:5px solid; border-radius:15px; background-color: #305052; } #product1 { position: relative; float: right; margin-top: 50px; margin-right: 40px; margin-left: 10px; width: 200px; height: 200px; background-color: #1F3536; } #product1:hover { #product1hover } #product2 { position: relative; float: right; margin-top: 50px; margin-left: 10px; width: 200px; height: 200px; background-color: #1F3536; } #product3 { position: relative; float: right; margin-top: 50px; width: 200px; height: 200px; background-color: #1F3536; }
Improve this question
3
  • use jquery hover and jquery show and jquery hide Commented Apr 4, 2014 at 21:35
  • I have never used JQuery and don't plan on using it, sureley there is a simpler way Commented Apr 4, 2014 at 21:36
  • 2
    yeah there is: Tilwin Joy just gave it to you. Commented Apr 4, 2014 at 21:37

1 Answer 1

Reset to default
4

If you change your HTML as follows

<div id="product1"> <div id="product1hover"></div> </div>

The following css will do

#product1hover{ display:none; } #product1:hover #product1hover{ display:block; }

Update

With your existing HTMLyou can achieve this as follows:

#product1hover{ display:none; } #product1:hover + #product1hover{ display:block; }
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments