CSS实现鼠标悬停图片放大的方法

CSS中实现鼠标悬停时图片放大的效果，可以通过使用:hover伪类选择器和transform属性来完成。以下是一个简单的示例代码：

?

1 2 3 4 5 6 7 8 9 10

/* 初始状态下的图片样式 */ .img {   width: 100px; /* 初始宽度 */   transition: transform 0.5s ease; /* 平滑过渡效果 */ }   /* 鼠标悬停时的图片样式 */ .img:hover {   transform: scale(1.2); /* 鼠标悬停时放大到原来的1.2倍 */ }

 HTML部分如下：

?

1	<img src="your-image.jpg" alt="描述文字" class="img">

 

在这个例子中，.img类定义了图片的初始状态，包括其宽度和过渡效果。transition属性确保了图片放大和缩小时有一个平滑的过渡效果，而不是突然变化。

当鼠标悬停在图片上时，.img:hover选择器会应用transform: scale(1.2);规则，将图片放大到原来的1.2倍。你可以根据需要调整scale()函数中的值来控制放大的程度。

请注意，transform属性可能需要浏览器前缀才能在某些旧版浏览器上正常工作，例如-webkit-transform用于Webkit内核的浏览器。但是，现代浏览器通常不需要这些前缀。