在 Web 前端开发中，鼠标悬停效果是一个非常常见的交互效果，它可以让用户更加深刻地感受到页面元素之间的关联性和交互性。不过，实现这个效果可能需要涉及到 CSS 的伪类和伪元素等知识，这些知识对于初学者来说可能会稍有困难。而 LESS 作为一种 CSS 预编译器，在实现鼠标悬停效果时提供了更加简洁和方便的解决方案。
LESS 中的鼠标悬停
在 LESS 中实现鼠标悬停效果，最常见的方式是使用 &:hover 这个伪类选择器。不过，在 LESS 中还有一些更加高级的方式可以实现鼠标悬停效果，比如：使用 @hover 这个内置的混合器。下面我们将分别介绍这两种方式的实现方法和示例代码。
使用 &:hover 实现鼠标悬停效果
使用 &:hover 这个伪类选择器是实现鼠标悬停效果最常见、最基础的方法。它的使用方法和普通的 CSS 是一样的，只是在选择器前面加上 & 符号就可以了。示例代码如下：
.button {
background-color: #f00;
&:hover {
background-color: #0f0;
}
}在这个示例中，我们定义了一个按钮样式 .button，并在按钮样式后面使用 &:hover 这个伪类选择器来定义悬停时的样式，即背景色改变为绿色。这样，当鼠标悬停在按钮上时，按钮的背景色就会由红色变为绿色。
使用 @hover 混合器实现鼠标悬停效果
除了 &:hover，LESS 还提供了 @hover 这个内置的混合器来实现鼠标悬停效果。这个混合器的使用方法比较特殊，需要在伪选择器前使用 ~ 符号和混合器名字。示例代码如下：
-- -------------------- ---- -------
------- -
----------------- -----
- -
--------------- -
----------------- -----
-
-
------- -
-----------------
-
-在这个示例中，我们首先在按钮样式 .button 内部，定义了一个混合器 .button-hover()，用来定义悬停时的样式。然后，在 &:hover 伪类选择器中使用了 ~ 符号和混合器名字 .button-hover()，调用了该混合器。这样，当鼠标悬停在按钮上时，该混合器会被调用，并把悬停时的样式应用到按钮上。
需要注意的是，使用 @hover 混合器可以在 LESS 中方便地实现一些更复杂的悬停效果，比如：在滚动时动态改变样式等。在实际项目中，可以根据需求选择适合的方式来实现鼠标悬停效果。
总结
本文介绍了 LESS 中实现鼠标悬停效果的两种方式：使用 &:hover 伪类选择器和使用 @hover 混合器。无论是哪种方式，它们都可以让我们更加方便地实现鼠标悬停效果，提高开发效率。同时，了解 LESS 中的这些特殊语法和使用方法，也可以为我们进一步学习和掌握 CSS 提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a4fd6748841e989416c96b