等価遷移

Question

divを上端と下端の両方でホバー上に延長するトランジションが必要です。今、それは上のdivをオーバーラップし、下のdivをプッシュします。

両側を押したり、両側を重ねたりします。両方のうちの1つではありません。

#blue, #red { 
    width: 100%; 
    height: 100px; 
    float: left; 
    transition: 0.8s; 
    transition-timing-function: ease-out; 
    font-size: 24px; 
    margin-top: 0; 
    margin-bottom: 0; 
} 

#blue { 
    background-color: blue; 
} 

#red { 
    background-color: red; 
} 

#blue:hover, #red:hover { 
    height: 200px; 
    font-size: 48px; 
    margin-top: -50px; 
} 

これは、私がwithを働いているものです：

#blue, #red { 
 
    width: 100%; 
 
    height: 50px; 
 
    float: left; 
 
    transition: 0.8s; 
 
    transition-timing-function: ease-out; 
 
    font-size: 12px; 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
} 
 

 
#blue { 
 
    background-color: blue; 
 
} 
 

 
#red { 
 
    background-color: red; 
 
} 
 

 
#blue:hover, #red:hover { 
 
    height: 100px; 
 
    margin-top: -25px; 
 
}

<div id="blue"></div> 
 
<div id="red"></div> 
 
<div id="blue"></div> 
 
<div id="red"></div> 
 
<div id="blue"></div> 
 
<div id="red"></div> 
 
<div id="blue"></div>

ありがとう！ここで

Answer 1

はあなたの問題です：

1. のは、ここにfloatを削除してみましょう、これは必須ではありません。
2. 負のマージンを削除します。これは、が重複するコードのためです。
3. 最後に、繰り返しIDなしでHTMLを修正します。

ここスニペット：

.blue, .red { 
 
    width: 100%; 
 
    height: 50px; 
 
    transition: 0.8s; 
 
    transition-timing-function: ease-out; 
 
    font-size: 12px; 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
} 
 

 
.blue { 
 
    background-color: blue; 
 
} 
 

 
.red { 
 
    background-color: red; 
 
} 
 

 
.blue:hover, .red:hover { 
 
    height: 100px; 
 
    margin-top: 0px; 
 
}

<div class="blue"></div> 
 
<div class="red"></div> 
 
<div class="blue"></div> 
 
<div class="red"></div> 
 
<div class="blue"></div> 
 
<div class="red"></div> 
 
<div class="blue"></div>

Answer 2

この

#blue, #red { 
 
    width: 100%; 
 
    height:50px; 
 
    float: left; 
 
    transition: 0.8s; 
 
    transition-timing-function: ease-out; 
 
    font-size: 12px; 
 
    margin-top: 0; 
 
    margin-bottom:0; 
 
} 
 
#blue { 
 
    background-color: blue; 
 
} 
 
#red { 
 
    background-color: red; 
 
} 
 
#blue:hover, #red:hover { 
 
    height:100px; 
 
    padding-top:25px; 
 
}

<div id="blue"></div> 
 
    <div id="red"></div> 
 
    <div id="blue"></div> 
 
    <div id="red"></div> 
 
    <div id="blue"></div> 
 
    <div id="red"></div> 
 
    <div id="blue"></div>

Answer 3

ない君たちは本当に私が何をしようとしている得ることを確認を確認してください。私は重複を取り除こうとしているだけではありません、私は上部と下部の両方で展開するようにしようとしています。

例では、赤いdivにマウスを合わせると、青いdivを押して離したり、両方を重ねたりします。私もどちらかといいです。今は片方の端に重なり、もう一方の端を押しのけます。

明確にするために、私は単純にdivを重複させずに大きくしたくありません。

これまでの回答に感謝します。