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;
}

1 Answers1

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;
}
T J
  • 42,762
  • 13
  • 83
  • 138