So verwenden Sie CSS, um das Bild zu vergrößern, wenn die Maus über das Miniaturbild gleitet-CSS-Tutorial-php.cn

So verwenden Sie CSS, um das Bild zu vergrößern, wenn die Maus über das Miniaturbild gleitet

墨辰丷

Freigeben： 2018-05-11 17:32:02

Original

2413 Leute haben es durchsucht

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>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="http://img4.pcpop.com/WallImages/0x0/0/190/000190571.jpg" /></li> 
</ul> 
<!--[if IE 6]></a><![endif]--> 
</body> 
</html>

Nach dem Login kopieren

Verwandte Empfehlungen:

Wie man HTML+CSS verwendet Maus darüber bewegen Sie können die sekundäre Menüleiste anzeigen

Praktische CSS3-Entwicklung: Lernen Sie Schritt für Schritt, wie Sie Spezialeffekte für die Bildanimation bei Mausbewegung entwickeln (zweite Runde)_html/css_WEB-ITnose

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!