宽度过渡 - divs重叠

我有2个div在容器内水平相邻放置。我希望每个div在将鼠标悬停在容器的整个宽度上时展开宽度。问题是，在转换之后，当指针不再徘徊左边的div（这是html流中的第一个）在右侧div下重叠。宽度过渡 - divs重叠

下面是一个例子。重新创建只需将指针放在左边的div上，直到转换完成，然后将指针从div移开。预期的效果是宽度会逐渐减小（就像右边的div一样）。

* { margin: 0; padding: 0; } 
 

 
#wrap { position: relative; width: 500px; margin: 0 auto; } 
 

 
#one, #two { height: 100px; position: absolute; transition: width 1s ease-out; } 
 

 
#one { width: 300px; background: #49d7b0; } 
 
#two { right: 0; width: 200px; background: #d8c800; } 
 

 
#one:hover, #two:hover { width: 500px; z-index: 1; }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <link rel="stylesheet" type="text/css" href="z-index.css"> 
 
</head> 
 
<body> 
 
\t <div id="wrap"> 
 
\t \t <div id="one"></div> 
 
\t \t <div id="two"></div> 
 
\t </div> 
 
</body> 
 
</html>

来源

2016-03-01 user5842084

这是一个z-index的问题。您必须根据鼠标的位置增加z-index。我认为在第一印象中，这将是很难实现的只有与css –

与之间更差设置Z-索引未盘旋和悬停的状态（例如，去从1到10）。

在z-index上添加转换也......但只有在返回到默认状态时才能进行。

这样，当您将悬停从一个元素更改为另一个元素时，新悬停的元素将立即生成高z-索引，而未悬停的元素将缓慢地将其悬空。新悬停的元素将在前面。

演示：（与排在首位的关键样式）

#one:hover, 
 
#two:hover { 
 
    width: 500px; 
 
    z-index: 10; 
 
    transition: width 1s ease-out, z-index 0s linear; 
 
} 
 
#one, 
 
#two { 
 
    z-index: 1; 
 
    transition: width 1s ease-out, z-index 1s linear; 
 
} 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#wrap { 
 
    position: relative; 
 
    width: 500px; 
 
    margin: 0 auto; 
 
} 
 
#one, 
 
#two { 
 
    height: 100px; 
 
    position: absolute; 
 
} 
 
#one { 
 
    width: 300px; 
 
    background: #49d7b0; 
 
} 
 
#two { 
 
    right: 0; 
 
    width: 200px; 
 
    background: #d8c800; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title></title> 
 
    <link rel="stylesheet" type="text/css" href="z-index.css"> 
 
</head> 
 

 
<body> 
 
    <div id="wrap"> 
 
    <div id="one"></div> 
 
    <div id="two"></div> 
 
    </div> 
 
</body> 
 

 
</html>

来源

2016-03-01 18:07:38 vals

完美的解决方案，无止境地工作！ – user5842084

这是不是一个真正的问题，只是溢出的方式有工作。你有2个选项：

1）使用CSS关键帧动画 - 这样，你可以给hovered div一个更高的z-index，并且有相反的动画保持z-index更高（把它放回到较低的索引在动画的最后）。

2）使用JavaScript/jQuery的（如果你想这对所有设备/浏览器很好地工作，我会建议jQuery的，无论如何，这给支持旧的浏览器IE8一样不支持CSS3）

来源

2016-03-01 12:03:51

animation可以在这里做诡计。其实z-index在这里引起这个问题。你可以通过以下方式解决。

* { margin: 0; padding: 0; } 
 

 
#wrap { position: relative; width: 500px; margin: 0 auto; } 
 

 
#one, #two { height: 100px; position: absolute; transition: width 1s ease-out; } 
 

 
#one { width: 300px; background: #49d7b0; animation: movedec 1s; } 
 
#two { right: 0; width: 200px; background: #d8c800; } 
 

 
#one:hover { animation: moveinc 1s forwards; -webkit-animation: moveinc 1s forwards; } 
 
#two:hover { width: 500px; } 
 

 
@keyframes moveinc { 
 
    from {width: 300px; z-index: 1;} 
 
    to {width: 500px; z-index: 1;} 
 
} 
 

 
@keyframes movedec { 
 
    from {width: 500px; z-index: 1;} 
 
    to {width: 300px; z-index: 1;} 
 
} 
 

 
@-webkit-keyframes moveinc { 
 
    from {width: 300px; z-index: 1;} 
 
    to {width: 500px; z-index: 1;} 
 
} 
 

 
@-webkit-keyframes movedec { 
 
    from {width: 500px; z-index: 1;} 
 
    to {width: 300px; z-index: 1;} 
 
}

<div id="wrap"> 
 
\t \t <div id="one"></div> 
 
\t \t <div id="two"></div> 
 
\t </div>

来源

2016-03-01 12:14:25 ketan

它将更好地移除一个的处理程序，而另一个转换被触发 – Litestone

宽度过渡 - divs重叠

回答

相关问题