要實現鼠標滑過文字顯示圖片的效果,可以使用CSS的:hover偽類和background-image屬性來實現。
首先,你需要創建一個包含文字的HTML元素,比如一個div或者p標簽:
<div class="image-text">Hover over me</div>
然后,在CSS中定義這個元素的樣式和鼠標滑過時的樣式:
.image-text {
width: 200px;
height: 200px;
background-color: #ccc;
text-align: center;
line-height: 200px;
}
.image-text:hover {
background-image: url('path/to/image.jpg');
background-size: cover;
}
在上面的例子中,當鼠標滑過.image-text元素時,它的背景圖像將會變為指定的圖片。你可以根據自己的需要替換路徑和圖片。
注意,為了確保圖像正確顯示,你可能需要調整背景圖像的大小和位置,可以使用background-size和background-position屬性來實現。
希望這個回答對你有幫助!