CSS3 圖片預覽 在前端開發中，圖片預覽是一項非常常見的需求。CSS3 提供了一種新的方式來實現圖片預覽效果。 CSS3 中的 `:hover` 偽類可以用于為元素設置鼠標懸停時的樣式。在進行圖片預覽時，我們可以利用 `:hover` 偽類來設置懸停時的樣式，從而實現圖片預覽的效果。 首先，我們需要為圖片設置一個容器元素。這個容器元素將會包含我們的圖片和預覽框。例如： ```html``` 接著，我們可以利用 CSS3 中的 `position` 屬性來為容器元素和預覽框進行定位。例如： ```css .image-container { position: relative; } .preview-box { position: absolute; top: 0; right: 100%; width: 200px; height: 200px; background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); display: none; } ``` 在上面的例子中，我們將容器元素設置為相對定位，使得內部的預覽框可以使用絕對定位進行定位。預覽框設置 `right: 100%` 可以使得預覽框在鼠標懸停在圖片上時顯示在圖片的左側。我們還設置了預覽框的寬度、高度、背景色、陰影和初始狀態為不可見。 最后，我們可以利用 `:hover` 偽類來控制預覽框的顯示與隱藏。例如： ```css .image-container:hover .preview-box { display: block; } ``` 在上面的例子中，我們將預覽框的顯示與隱藏與容器元素的 `:hover` 狀態關聯起來。當鼠標懸停在容器元素上時，預覽框將會顯示出來。 通過以上的 HTML 和 CSS 代碼，我們可以實現一個基本的圖片預覽效果。當鼠標懸停在圖片上時，預覽框會顯示出來。我們還可以添加一些額外的樣式和效果來進一步完善這個圖片預覽功能。