鼠标移入,图片放大

  • 鼠标移入,图片放大已关闭评论
  • 17 次浏览
  • A+
所属分类:Web前端

效果

之前:

鼠标移入,图片放大

之后

鼠标移入,图片放大

Code

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> 	<div class="rect"> 		<img src="https://images3.alphacoders.com/246/thumbbig-246225.webp" class="img"/> 	</div> 	 <style> 	.rect{                 width:600px;                 height:338px; 		overflow:hidden; 	} 	 	.img{ 		transition:1s; 	} 	 	.img:hover{ 		transform:scale(1.2); 	} </style> </body> </html> 

解释

  1. 外层 div 设置 overflow:hidden; :意为超出div宽高的部分不显示
  2. 内层 img 设置 .img:hover{transform:scale(1.2);} 当鼠标指上去的时候放大;

备注

  1. transition: 这里面的4种,我测试了,但是没明白啥效果,至少我测试效果不明显,或者我代码有问题,又或者菜鸟的在线html有点问题无法实现

参考

  1. 实现思路,然后自己对着他的代码来了一遍:https://blog.csdn.net/m0_59792745/article/details/127078853
  2. 在菜鸟教程在线编辑器实现:https://www.runoob.com/try/try.php?filename=tryhtml_intro
  3. 文档查询: