overlay: svg移位overlay-div，它们不再匹配
overlay: svg移位overlay-div，它们不再匹配
提问于 2018-08-15 05:44:46
我完全是新来的，所以如果我问错了问题或者忘记了什么，我很抱歉。我尝试了其他问题/答案中的东西，但都不能解决我的问题。
我在div1上有一个简单的覆盖div2。div1内部有一个svg。当向下悬停时，svg会推动div2，这样它就不会重叠。我希望两个div2完全重叠，这样div1的svg就会在div2下消失。
我希望有人能帮助我。
代码如下：
.div1 {
width: 500px;
background-color: #1b1412;
padding: 20px;
margin: auto;
}
.svg {
width: 500px;
height: 800px;
opacity: 0.9;
}
.div2 {
width: 500px;
height: 800px;
margin: auto;
position: relative;
margin-top: 8px;
opacity: 0.0;
transition-timing-function: ease;
transition-delay: 0.5s;
transition-duration: 0.5s;
transition-property: all;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
}
.div2:hover {
opacity: 1.0;
}<center>
<div class="div1">
<div class="svg">
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><defs><style>.cls-1{fill:none;stroke:#5b2322;stroke-miterlimit:10;stroke-width:18px;}.cls-2{font-size:92px;fill:#d6c9c6;font-family:Alter-Inline-Grunge, Alter Inline Grunge;}.cls-3{letter-spacing:0.04em;}.cls-4{letter-spacing:0.06em;}.cls-5{letter-spacing:0.06em;}.cls-6{letter-spacing:0.06em;}.cls-7{letter-spacing:0.04em;}.cls-8{letter-spacing:0.06em;}.cls-9{letter-spacing:0.06em;}.cls-10{letter-spacing:0em;}.cls-11,.cls-13,.cls-14{font-family:Ruthie-Regular, Ruthie;}.cls-12{letter-spacing:0em;}.cls-13{font-size:100px;}.cls-13,.cls-14{fill:#9d6763;}.cls-14{font-size:57px;}</style></defs><title>Prospero's Dream</title><polygon class="cls-1" points="311.81 124.73 240.74 42.67 169.67 124.73 98.59 206.78 169.67 288.84 240.74 370.89 311.81 288.84 382.88 206.78 311.81 124.73"/><text class="cls-2" transform="translate(75.9 242.72)"><tspan class="cls-3">P</tspan><tspan class="cls-4" x="35.69" y="0">r</tspan><tspan class="cls-5" x="75.71" y="0">o</tspan><tspan class="cls-6" x="112.79" y="0">s</tspan><tspan class="cls-7" x="149.77" y="0">p</tspan><tspan class="cls-8" x="185.47" y="0">e</tspan><tspan class="cls-9" x="222.54" y="0">r</tspan><tspan class="cls-10" x="262.56" y="0">o</tspan><tspan class="cls-11" x="294.3" y="0">‘</tspan><tspan class="cls-12" x="309.75" y="0">s</tspan></text><text class="cls-13" transform="translate(141.29 294.74)">Dream</text><text class="cls-14" transform="translate(180.3 173.5)">Lost in</text></svg>
<div class="div2">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</div>
回答 1
Stack Overflow用户
发布于 2018-08-15 10:16:45
而不是试图在悬停时将第二个div重叠在第一个div的顶部，您可以只隐藏第一个div并显示第二个div以达到相同的效果。代码片段：
.div1 {
width: 500px;
background-color: #1b1412;
padding: 20px;
margin: auto;
}
.svg {
width: 500px;
height: 800px;
opacity: 0.9;
}
.container:hover .svg {
display: none;
}
.div2 {
width: 500px;
height: 800px;
color: white;
margin: auto;
margin-top: 8px;
transition-timing-function: ease;
transition-delay: 0.5s;
transition-duration: 0.5s;
transition-property: all;
}<div class="container">
<div class="div1">
<div class="svg">
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><defs><style>.cls-1{fill:none;stroke:#5b2322;stroke-miterlimit:10;stroke-width:18px;}.cls-2{font-size:92px;fill:#d6c9c6;font-family:Alter-Inline-Grunge, Alter Inline Grunge;}.cls-3{letter-spacing:0.04em;}.cls-4{letter-spacing:0.06em;}.cls-5{letter-spacing:0.06em;}.cls-6{letter-spacing:0.06em;}.cls-7{letter-spacing:0.04em;}.cls-8{letter-spacing:0.06em;}.cls-9{letter-spacing:0.06em;}.cls-10{letter-spacing:0em;}.cls-11,.cls-13,.cls-14{font-family:Ruthie-Regular, Ruthie;}.cls-12{letter-spacing:0em;}.cls-13{font-size:100px;}.cls-13,.cls-14{fill:#9d6763;}.cls-14{font-size:57px;}</style></defs><title>Prospero's Dream</title><polygon class="cls-1" points="311.81 124.73 240.74 42.67 169.67 124.73 98.59 206.78 169.67 288.84 240.74 370.89 311.81 288.84 382.88 206.78 311.81 124.73"/><text class="cls-2" transform="translate(75.9 242.72)"><tspan class="cls-3">P</tspan><tspan class="cls-4" x="35.69" y="0">r</tspan><tspan class="cls-5" x="75.71" y="0">o</tspan><tspan class="cls-6" x="112.79" y="0">s</tspan><tspan class="cls-7" x="149.77" y="0">p</tspan><tspan class="cls-8" x="185.47" y="0">e</tspan><tspan class="cls-9" x="222.54" y="0">r</tspan><tspan class="cls-10" x="262.56" y="0">o</tspan><tspan class="cls-11" x="294.3" y="0">‘</tspan><tspan class="cls-12" x="309.75" y="0">s</tspan></text><text class="cls-13" transform="translate(141.29 294.74)">Dream</text><text class="cls-14" transform="translate(180.3 173.5)">Lost in</text>
</svg>
</div>
<div class="div2">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51850179
复制相关文章
相似问题