js鼠标悬浮放大
时间: 2023-07-23 10:07:42 浏览: 49
你可以使用CSS的:hover伪类和transform属性来实现鼠标悬浮放大的效果。例如:
HTML代码:
```
<div class="image-container">
<img src="your-image-url" alt="your-image-description">
</div>
```
CSS代码:
```
.image-container {
overflow: hidden; /* 隐藏图片溢出部分 */
width: 200px; /* 图片容器宽度 */
height: 200px; /* 图片容器高度 */
}
.image-container img {
width: 100%; /* 图片宽度填充父元素 */
height: 100%; /* 图片高度填充父元素 */
transition: transform 0.3s ease-in-out; /* 添加过渡效果 */
}
.image-container:hover img {
transform: scale(1.2); /* 鼠标悬浮时放大图片 */
}
```
这样,当鼠标悬浮在图片上时,图片就会以1.2倍的比例放大。