CSS 鼠標點擊放大圖效果在網頁設計中是一個非常實用的效果，它可以讓用戶更加直觀地查看圖片。下面是一個使用 CSS 實現鼠標點擊放大圖的樣例。
<html>
<head>
<style type="text/css">
/* 隱藏大圖 */
.bigimg{
display:none;
}
/* 鼠標懸停在縮略圖上時 */
.thumbnail:hover ~ .bigimg{
display:block;
position:absolute;
top:50px; /* 大圖距離頂部的位置 */
left:200px; /* 大圖距離左側的位置 */
z-index:999; /* 確保大圖在最上面 */
width:400px; /* 大圖的寬度 */
height:auto; /* 大圖的高度自適應 */
border:2px solid #000; /* 大圖的邊框 */
padding:5px; /* 大圖的內邊距 */
}
</style>
</head>
<body>
<div class="thumbnail">
<img src="thumbnail.jpg"> /* 縮略圖 */
</div>
<div class="bigimg">
<img src="big.jpg"> /* 大圖 */
</div>
</body>
</html>實現原理是通過 CSS 的兄弟選擇器（~）來控制大圖的顯示與隱藏。當鼠標懸停在縮略圖上時，就會選中縮略圖后面的大圖，并修改其display屬性來實現顯示。
以上代碼只是一個簡單的樣例，實際上可以根據具體需求來進行修改。例如，可以添加動畫效果來讓大圖顯示更加平滑，也可以通過 JavaScript 來實現更加復雜的交互效果。
上一篇css豎屏居中
下一篇css鼠標點擊時的樣式