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