幅の遷移 - 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インデックスの問題です。マウスがどこにあるかに応じてz-indexをインクリメントする必要があります。私は最初の印象では、これはCSSでのみ達成するのが難しいと思います –

。

また、z-インデックスへのトランジションを追加します。ただし、デフォルト状態に戻るときに限ります。

この方法では、ある要素から別の要素にホバーを変更すると、新しく配置された要素はすぐに高い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

これは本当に問題、オーバーフローが仕事をしなければならないだけの方法ではありません。

1）CSSキーフレームアニメーションを使用すると、ホバリングされたdivに高いzインデックスを与え、逆のアニメーションでzインデックスをより高く保つことができます（低いインデックスに戻すアニメーションの最後で）。

2）のjavascript/jqueryのを使用します（これは、すべてのデバイス/ブラウザ上でうまく動作するようにしたい場合は、私はCSS3をサポートしていないIE8のような古いブラウザへの支援を与える、とにかくjQueryのをお勧めします）

出典

2016-03-01 12:03:51

animationはここでトリックを行うことができます。実際にはz-indexが問題を引き起こします。あなたは次のように解決することができます。（例えば、1から10へ）未推移とホバー状態との複数の差分と、Zインデックスを設定

* { 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

もう1つのトランジションがトリガされている間にハンドラを削除する方が良いでしょう – Litestone

幅の遷移 - divsのオーバーラップ

答えて

関連する問題