Question

我正试着这样做，以便当有人盘旋在div框上时，它会在它下方显示一个单独的div框。我该怎么做呢？

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

Answer 1

如果您按如下方式更改HTML

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

以下css将执行

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

更新

使用现有的HTML，您可以按如下方式实现：

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

HTML和CSS：在悬停显示div上

1 个答案: