我的 CSS 有一些问题；
当悬停过渡开始时，右侧的 div 随其内容一起消失，并在过渡(您看不到)完成时重新出现。我想重新创建与左侧 div 过渡相同的效果，但然后从右侧开始。
另外，当左边的 div 调整大小时，右边的 div 也会消失。
有什么想法吗？
body {
margin: 0;
overflow-y: hidden;
}
div.right {
width: 50vw;
height: 100vh;
float: right;
background-color: #8B9ECF;
transition: width 1s;
}
div.left {
width: 50vw;
height: 100vh;
float: left;
background-color: #A0DB75;
transition: width 1s;
}
div.right:hover {
width: 70vw;
}
div.left:hover {
width: 70vw;
}
p {
text-align: center;
vertical-align: middle;
line-height: 120vh;
color: white;
font-family: sans-serif;
font-size: 250%;
}<body>
<div class="left">
<p>Left</p>
</div>
<div class="right">
<p>Right</p>
</div>
</body>最佳答案
另一种方法是添加一个额外的 div
<body>
<div class="container">
<div class="left">
<p>Left</p>
</div>
<div class="right">
<p>Right</p>
</div>
</div>
</body>
并使用下面的 CSS
.container:hover div.right,
.container:hover div.left {
width: 30vw;
}
div.right:hover {
width: 70vw !important;
}
div.left:hover {
width: 70vw!important;
}
div.left:hover + div.right {
width: 30vw;
}
完整的 CSS:
body {
margin: 0;
overflow-y: hidden;
}
div.right {
width: 50vw;
height: 100vh;
float: right;
background-color: #8B9ECF;
transition: width 1s;
}
div.left {
width: 50vw;
height: 100vh;
float: left;
background-color: #A0DB75;
transition: width 1s;
}
.container:hover div.right,
.container:hover div.left {
width: 30vw;
}
div.right:hover {
width: 70vw !important;
}
div.left:hover {
width: 70vw!important;
}
div.left:hover + div.right {
width: 30vw;
}
p {
text-align: center;
vertical-align: middle;
line-height: 120vh;
color: white;
font-family: sans-serif;
font-size: 250%;
}
关于html - Div 在悬停过渡时消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29732649/