HTML
<div class="section">
<img src="/AP/Email.svg" />
<div class="layer"><img src="/AP/PhoneNumber.svg"></div>
CSS
.section {
position: absolute;
transition: transform 1.5s ease-out;
margin-top: 12%;
margin-left: -1%;
}
.layer {
position: absolute;
transition: transform 1.5s ease-out;
margin-top: 4%;
margin-left: 4%;
}
.section:hover img {background-color: red;}
.section:hover .layer {transform: translate(15%)}
所以在上面我試圖擁有它，所以當我懸停一個時，它會在不同的方向上影片。現在它似乎作業但只影片電話號碼，而不是電子郵件和電話號碼。我已經嘗試了幾種不同的嘗試，其中一種影片都在同一方向上。知道我做錯了什么嗎？
uj5u.com熱心網友回復：
.section {
position: absolute;
transition: transform 1.5s ease-out;
margin-top: 12%;
margin-left: 10%;
}
.layer1 {
position: relative;
transition: transform 1.5s ease-out;
margin-top: 4%;
margin-left: 4%;
}
.layer2 {
position: relative;
transition: transform 1.5s ease-out;
margin-top: 4%;
margin-left: 4%;
}
.section:hover img {
background-color: red;
}
.section:hover .layer1 {
transform: translate(15%)
}
.section:hover .layer2 {
transform: translate(-15%)
}<div class="section">
<div class="layer1"><img src="https://www.typinks.com/images/character-sketch-of-friar-laurence-in-romeo-and-juliet.webp" width="100px" height="100px" /></div>
<div class="layer2"><img src="https://www.typinks.com/images/role-of-fate-in-romeo-and-juliet.webp" width="100px" height="100px"></div>
</div>這有幫助嗎？為了影片它不同的方向，在相反的方向平移
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/527396.html