在网页设计中，图像是经常被用到的元素，为了增强用户体验，我们可以在图像上利用鼠标悬浮事件来实现放大效果。在 LESS 中，我们可以通过 CSS3 的 transform 属性来实现此效果。
实现步骤
1. 定义样式
首先，我们需要定义图像的样式，为了方便制作示例，我们在 HTML 中引入一张图片，并设置它的类为 img-hover：
<img src="./images/example.png" alt="example" class="img-hover">
在 LESS 中，我们可以通过 .img-hover 类来给这个图片设置样式：
.img-hover {
width: 250px;
height: 250px;
transition: transform 0.5s ease;
}上述代码定义了图片的宽高和过渡效果，同时还设置了 CSS3 的 transition 属性，用于产生平滑的过渡效果。
2. 定义鼠标悬浮时的样式
接下来，我们可以开始制作鼠标悬浮时的效果。在 LESS 中，我们使用 :hover 选择器来定义鼠标悬浮时的样式：
.img-hover:hover {
transform: scale(1.1);
}上述代码中，我们使用了 transform 属性，并设置它的值为 scale(1.1)，表示将图片放大为原来的 1.1 倍。这样，在鼠标悬浮时，图片就会被放大。
示例代码
下面是一个完整的示例代码，你可以复制它并运行在你的浏览器中：
-- -------------------- ---- -------
--------- -----
------
------
----------- ------------------
-------
---------- -
------ ------
------- ------
----------- --------- ---- -----
-
---------------- -
---------- -----------
-
--------
-------
------
---- -------------------------- ------------- ------------------
-------
-------总结
利用 LESS 中的 CSS3 属性，我们可以轻松地实现图像悬浮放大效果。此外，通过不断学习和探索，我们可以进一步丰富网页设计的效果，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a3ad4548841e989400aacf