CSS 鼠標移入顯示圖片
CSS是一種樣式表語言，它被用來描述HTML或XML（包括如SVG或XHTML等諸多XML基礎文件）文檔的表現。CSS是實現Web頁面樣式和版面進行控制的一種樣式表語言。通過CSS，我們不僅可以控制文本內容和字體格式，還可以實現更為復雜的效果，如鼠標移入顯示圖片。
讓我們來看看如何通過CSS實現這個效果。
首先，我們需要在HTML中設置一個容器標簽，如
或，并在其中插入需要顯示的圖片，如下所示：
<div class="container"> <img src="image.jpg" alt="My Image" class="my-img"> </div>其中，.container是包含圖片的容器標簽的類名，.my-img則是該圖片的類名。 接著，在CSS中添加以下代碼：
.container {
position: relative;
}
.my-img {
display: none;
position: absolute;
top: 0;
left: 0;
}
.container:hover .my-img {
display: block;
}我們在.container的樣式中設置position為relative，以便容器可以作為參考點來定位.my-img。而在.my-img的樣式中，我們將display設為none，這樣在默認情況下，圖片就不會顯示出來。接著，我們將圖片的position設置為absolute，并將其top和left都設為0，以確保它位于容器的左上角。
最后，我們在.container:hover .my-img的樣式中，將圖片的display改為block，這樣當鼠標懸停在容器上時，圖片就會顯示出來。
現在，當鼠標移入容器時，你將看到你所插入的圖片。這個效果可以定制化，以展示各種圖片。