在CSS中,hover伪类选择器本身不能直接实现缩放效果。但是,您可以使用CSS的transform
属性来实现缩放效果。以下是一个简单的示例:
HTML:
Hover Zoom Effect
CSS (styles.css):
.zoom-container { display: inline-block; cursor: pointer; } .zoom-image { transition: transform 0.2s; /* 过渡效果,可使缩放更平滑 */ } .zoom-container:hover .zoom-image { transform: scale(1.2); /* 设定放大倍数,例如1.2表示放大至原始尺寸的120% */ }
在这个示例中,当鼠标悬停在包含图像的容器上时,图像会以1.2倍的大小缩放。您可以根据需要调整放大倍数。