本篇文章主要介紹css如何實現滑鼠滑過縮圖時放大圖片，日常購物網站中非常方便實用，有興趣的小夥伴參考下。
程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.php.cn php中文网 鼠标滑过缩略图时放大图片</title>
<style type="text/css">
<!--
* {margin:0;padding:0;}
body {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;}
img {border:0}
p {font-size:14px;}
#imgmove li {float:left; width:50px; height:40px; display:block; overflow:visible;*overflow:hidden; margin:0px 5px; border:3px #333 solid;position:relative;*position:static;}
#imgmove img {position:absolute;left:0px;top:0px;clip:rect(0px 50px 40px 0px);z-index: 0;*position:static;}
#imgmove img:hover {position:relative; left:-3px; top:-3px; border:3px #f00 solid; z-index:2; clip:rect(0px 137px 137px 0px);}
-->
</style>
</head>
<body>
<p>本例旨在展示鼠标滑到缩略图上时，放大图片。</p>
<!--[if IE 6]><a href="#"><![endif]-->
<ul id="imgmove">
<li><img src="/static/imghwm/default1.png" data-src="http://img4.pcpop.com/WallImages/0x0/0/190/000190571.jpg" class="lazy" / alt="css如何實現滑鼠滑過縮圖時放大圖片" ></li>
</ul>
<!--[if IE 6]></a><![endif]-->
</body>
</html>相關推薦：
CSS3實戰開發: 手把手教大家實戰開發滑鼠劃過圖片動畫特效(第二彈)_html/css_WEB-ITnose
css3滑鼠劃過圖片散開特效_html/css_WEB-ITnose
以上是css如何實現滑鼠滑過縮圖時放大圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
每周平台新聞：改進慢速連接上的UX，用於編寫ALT文本的提示和HTML加載屬性的多填充Apr 17, 2025 am 11:09 AM在本週的綜述中，如何確定慢速連接，我們應該在圖像中放入alt文本中的內容以及用於HTML加載屬性的新polyfill，
每周平台新聞：HTML加載屬性，主要的ARIA規格以及從iframe轉移到Shadow domApr 17, 2025 am 10:55 AM在本週的平台新聞綜述中，Chrome引入了一個用於加載的新屬性，Web開發人員的可訪問性規範以及BBC Move
帶有GraphQL的多人遊戲TIC TAC TOEApr 17, 2025 am 10:54 AMGraphQL是API的查詢語言，對前端開發人員非常有能力。正如GraphQL網站所解釋的那樣，您可以描述您的數據，詢問什麼
懶負載嵌入YouTube視頻Apr 17, 2025 am 10:40 AM通過亞瑟·科倫贊（Arthur Corenzan），這是一個非常聰明的主意。與其使用默認的YouTube嵌入，該YouTube嵌入了，這會在用戶播放的情況下在頁面上添加大量資源
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前By尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
2 週前ByDDD
R.E.P.O.如果您聽不到任何人，如何修復音頻
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
1 個月前By尊渡假赌尊渡假赌尊渡假赌
熱工具
WebStorm Mac版
好用的JavaScript開發工具
記事本++7.3.1
好用且免費的程式碼編輯器
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
SublimeText3漢化版
中文版，非常好用
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
