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