less hover
时间: 2023-10-31 18:59:34 浏览: 70
The "less hover" refers to using the CSS pseudo-class ":hover" with the LESS preprocessor. In LESS, you can write dynamic and reusable CSS styles using variables, mixins, and other features. When it comes to applying styles specifically when hovering over an element, you can use the ":hover" pseudo-class.
Here's an example of using ":hover" in LESS:
```less
@color: #ff0000;
.button {
background-color: @color;
transition: background-color 0.3s ease;
&:hover {
background-color: darken(@color, 10%);
}
}
```
In the example above, the ".button" class has its background color set to a variable "@color". When hovering over the button, the background color is darkened by 10% using the LESS function "darken()". The "transition" property is also used to create a smooth color transition when hovering.
This is just a basic example, but you can apply the ":hover" pseudo-class to any selector or property within your LESS code to achieve different effects when hovering over elements.
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)