Comment utiliser CSS pour agrandir l'image lorsque la souris glisse sur la vignette-tutoriel CSS-php.cn

Comment utiliser CSS pour agrandir l'image lorsque la souris glisse sur la vignette

墨辰丷

Libérer： 2018-05-11 17:32:02

original

2367 Les gens l'ont consulté

Cet article explique principalement comment utiliser CSS pour agrandir l'image lorsque la souris glisse sur la vignette. C'est très pratique dans les sites Web d'achats quotidiens. Les amis intéressés peuvent s'y référer.

Le code est le suivant :

<!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>

Copier après la connexion

Recommandations associées :

Comment utiliser HTML+ CSS pour créer une souris Le défilement affichera la barre de menu secondaire

Développement pratique CSS3 : vous apprendra étape par étape comment développer des effets d'animation pour le survol des images avec la souris (deuxième tour)_html /css_WEB-ITnose

css3 souris sur l'effet de diffusion d'image_html/css_WEB-ITnose

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!