我正在嘗試制作一個頁面，并且在其中我正在制作當圖片懸停在它上面時它會顯示為一張卡片并且文本會出現在它下面但我不確定如何使文本部分發生這就是我現在有（我是初學者）
<img src="pics/ii.jpg" class="crd_1">
<p class="crd1">hskgnskg<br>kdjfehbdbdgdf<br>jdbhfkdf</p>
<img src="pics/vi.jpg" class="crd_2">
<img src="pics/iii.jpg" class="crd_3">
<img src="pics/v.jpg" class="crd_4">
這是 HTML 部分。
.crd_1{
width: 220px;
height: 240px;
padding-bottom: 50px;
padding-top: 6px;
padding-left: 6px;
padding-right: 6px;
background-color: red;
margin-top: 390px;
margin-left:250px;
cursor: pointer;
position: absolute;
transition: .3s ease-in-out;
}
.crd_2{
width: 220px;
height: 240px;
padding-bottom: 50px;
padding-top: 6px;
padding-left: 6px;
padding-right: 6px;
background-color: red;
margin-top: 390px;
margin-left:510px;
background-color: red;
cursor: pointer;
word-spacing: 50px;
position: absolute;
transition: .3s ease-in-out;
}
.crd_3{
width: 220px;
height: 240px;
padding-bottom: 50px;
padding-top: 6px;
padding-left: 6px;
padding-right: 6px;
background-color: red;
margin-top: 390px;
margin-left:770px;
background-color: red;
cursor: pointer;
position: absolute;
transition: .3s ease-in-out;
}
.crd_4{
width: 220px;
height: 240px;
padding-bottom: 50px;
padding-top: 6px;
padding-left: 6px;
padding-right: 6px;
background-color: red;
margin-top: 390px;
margin-left: 1030px;
background-color: red;
cursor: pointer;
position: absolute;
transition: .3s ease-in-out;
}
.crd_1:hover{
transform: translateY(-35px);
height: 320px;
padding-bottom: 120px;
}
.crd_2:hover{
transform: translateY(-35px);
height: 320px;
padding-bottom: 120px;
}
.crd_3:hover{
transform: translateY(-35px);
height: 320px;
padding-bottom: 120px;
}
.crd_4:hover{
transform: translateY(-35px);
height: 320px;
padding-bottom: 120px;
}
這是 CSS 部分。
這將使圖片在懸停時上升并顯示為卡片，但文本部分是我無法做到的，如果你能幫助我
uj5u.com熱心網友回復：
如果我理解正確，當影像懸停時您要實作的目標將執行以下操作：
- 影像將向上“移動”
- 文字將顯示在下方
有幾種方法可以實作這一點，我要做的是：
- 包裝你的圖片和文字，這樣懸停事件可以覆寫里面的元素：
<div class='wrapper'>
<img src="pics/ii.jpg" class="crd_1">
<p class="crd1">hskgnskg<br>kdjfehbdbdgdf<br>jdbhfkdf</p>
<div/>
- 將您的文本“p”標簽設定為隱藏：
display:none - 在包裝器下相應地定位元素，如下所示：
.wrapper:hover image {
transform: translateY(-35px);
height: 320px;
padding-bottom: 120px;
}
.wrapper:hover p {
display: unset;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/410713.html
標籤：