Rumah > Soal Jawab > teks badan
Saya tidak faham mengapa div kembali ke keadaan biasa tanpa animasi. Saya mencuba segala-galanya
Ini kod saya:
Saya telah mencari di banyak tempat tetapi tidak menemui masalahnya.
<div id="quadro_tudo"> <div id="esq" class="btn" onclick="rolada(this)"></div> <div id="slides"> <div id="imagens"> <img src="imagens/image1.png" alt=""> <img src="imagens/image2.png" alt=""> <img src="imagens/image3.png" alt=""> </div> </div> <div id="dir" class="btn" onclick="rolada(this)"></div> </div>
Ini css saya:
*{ margin: 0px; padding: 0px; } main{ width: 600px; margin: auto; } div#slides{ display: flex; width: 600px; height: 250px; overflow: hidden; position: absolute; } div#slides:hover{ height: 850px; transition: all 1s ease-in-out 0.5s; } div#imagens{ display: flex; flex-direction: column; width: 600px; height: 850px; z-index: 1; } div#imagens > img{height: 850px;} div#quadro_tudo{ display: flex; margin: 500px 0px; flex-direction: row; justify-content: space-between; align-items: center; } div.btn{ height: 250px; width: 75px; z-index: 2; background-color: rgba(240, 248, 255, 0); } div.btn:hover{ transition: 1s; } div.btn#esq:hover{ background-image: linear-gradient(to right, purple, rgba(255, 255, 255, 0)); transition-duration: 1s; } div.btn#dir:hover{ background-image: linear-gradient(to left, purple, rgba(255, 255, 255, 0)); }
Saya cuba menukar ketinggian daripada 250px kepada 850px dalam 1 saat dan kembali kepada 250px dalam 1 saat
P粉5338986942023-09-21 16:01:34
Anda sepatutnya transition
属性添加到 div#slides
而不是 div#slides:hover
.
* { margin: 0px; padding: 0px; } main { width: 600px; margin: auto; } div#slides { display: flex; width: 600px; height: 250px; overflow: hidden; position: absolute; transition: height 1s ease-in-out; } div#slides:hover { height: 850px; } div#imagens { display: flex; flex-direction: column; width: 600px; height: 850px; z-index: 1; } div#imagens > img { height: 850px; } div#quadro_tudo { display: flex; margin: 500px 0px; flex-direction: row; justify-content: space-between; align-items: center; } div.btn { height: 250px; width: 75px; z-index: 2; background-color: rgba(240, 248, 255, 0); } div.btn:hover { transition: 1s; } div.btn#esq:hover { background-image: linear-gradient(to right, purple, rgba(255, 255, 255, 0)); transition-duration: 1s; } div.btn#dir:hover { background-image: linear-gradient(to left, purple, rgba(255, 255, 255, 0)); }
<div id="quadro_tudo"> <div id="esq" class="btn" onclick="rolada(this)"></div> <div id="slides"> <div id="imagens"> <img src="imagens/image1.png" alt="" /> <img src="imagens/image2.png" alt="" /> <img src="imagens/image3.png" alt="" /> </div> </div> <div id="dir" class="btn" onclick="rolada(this)"></div> </div>