Question

HTML看起来像这样

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Oppgave 5</title>
<style type="text/css">

</style>
</head>
<body>
    <div id="animWrap">
        <div id="boks"></div>
    </div>
</body>
</html>

我想做的是让id为“boks”的div扩展并“吃掉”整个div“animWrap”。

所以我的css如下：

    body{
    margin: 0px;
}

#animWrap{
    height: 600px;
    width: 960px;
    background-color: rgb(145, 75, 75);
    margin: auto;
    position: relative;
}

#boks{
    width: 250px;
    height: 175px;
    top: 200px;
    left: 380px;
    background-color: rgb(180, 100, 100);
    position: absolute;
    transition: all 5s linear 0s;
}

#animWrap:hover #boks {
    height: 400px;
    width: 580px;
}

我注意到它只是向右和向下扩展。可能是因为它没有正确居中。有没有办法从中间向每个方向扩展它只有html和css？

Answer 1

当然，你可以这样做，但你必须应用一个技巧。只计算剩余的空间。在这种情况下，我认为整个div覆盖的空间是960px，而#bok在悬停时得到580px所以左边的空间= 190px，右边= 190px。现在你可以像这样应用悬停css：

#animWrap:hover #boks {
    height: 400px;
    width: 580px;
    left:190px;
}

这将完成诀窍，并在中心进行动画对齐。它在我的工作。快乐的编码！干杯!!

Answer 2

如果您设置#boks宽度＆amp;高度分别为100%，并将其注释为top和left值，它应该填满整个父div：

#boks{
    width: 100%;
    height: 100%;
    background-color: rgb(180, 100, 100);
    position: absolute;
    transition: all 5s linear 0s;
}

HTML / CSS将div放在另一个div中，并使其扩展

2 个答案: