寬度過渡 - 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重疊

回答

相關問題