In diesem Artikel wird hauptsächlich die Verwendung von CSS zum Vergrößern des Bildes vorgestellt, wenn die Maus über das Miniaturbild gleitet. Dies ist sehr praktisch und praktisch für den täglichen Einkauf auf Websites.
Der Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>m.sbmmt.com 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="http://img4.pcpop.com/WallImages/0x0/0/190/000190571.jpg" /></li>
</ul>
<!--[if IE 6]></a><![endif]-->
</body>
</html>Verwandte Empfehlungen:
Wie man HTML+CSS verwendet Maus darüber bewegen Sie können die sekundäre Menüleiste anzeigen
CSS3-Maus über Bild-Scatter-Effekt_html/css_WEB-ITnose
Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, um das Bild zu vergrößern, wenn die Maus über das Miniaturbild gleitet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
