Heim > Artikel > Web-Frontend > So verwenden Sie CSS, um das Bild zu vergrößern, wenn die Maus über das Miniaturbild gleitet

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

墨辰丷Original: 2018-05-11 17:32:022354Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verschönerung der CSS-AnmeldeschnittstelleNächster Artikel：Verschönerung der CSS-Anmeldeschnittstelle

In Verbindung stehende Artikel

Mehr sehen