gpt4 book ai didi

css - 如何设置:hover color to normal color with Less?

转载 作者:行者123 更新时间:2023-11-28 16:31:38 24 4
gpt4 key购买 nike

我有一个组件 jl-btn可以有不同的 color (这里的 CSS 属性)取决于它可能受到影响的其他类。这些类可以与 <a> 一起使用元素,我想在一个 Less 语句中说 :hover:focus颜色必须与正常状态相同。

.jl-btn {
color: blue;

&.jl-btn-important {
color: red;
}

&:hover, &:focus {
color: ???,
text-decoration: none
}
}

我尝试设置 colorinheritinitial但它将其设置为黑色。如果有 jl-btn-important,我想要的是 :hover 和 :focus 颜色为红色类,如果没有则为蓝色。

有什么想法吗?

[编辑] 不好意思,我忘了说我正在使用为 a:hover, a:focus 定义样式的 bootstrap 脚手架

最佳答案

选项 1:(如果没有其他设置覆盖默认行为)

理想情况下,不在 :hover:focus 选择器下添加任何 color 设置本身应该有效。下面的代码片段就是证明。但如果它不起作用,则有一些其他选择器覆盖它。

.jl-btn {
color: blue;
}
.jl-btn.jl-btn-important {
color: red;
}
.jl-btn:hover,
.jl-btn:focus {
text-decoration: none;
}
<a class='jl-btn' href='#'>Hello</a>
<a class='jl-btn jl-btn-important' href='#'>Hello</a>


选项 2::(如果某些其他选择器覆盖默认行为,例如 Bootstrap 或其他库)

在这种情况下,您可以将 Less 代码修改为如下所示。这会将相同的颜色应用于默认的 :hover:focus 选择器,而无需在每个选择器下重复使用 color

.jl-btn {
&, &:hover, &:focus{
color: blue;
}
&.jl-btn-important {
&, &:hover, &:focus {
color: red;
}
}
&:hover, &:focus {
text-decoration: none
}
}

以下代码片段基于上述 Less 代码的编译 CSS 输出。

.jl-btn,
.jl-btn:hover,
.jl-btn:focus {
color: blue;
}
.jl-btn.jl-btn-important,
.jl-btn.jl-btn-important:hover,
.jl-btn.jl-btn-important:focus {
color: red;
}
.jl-btn:hover,
.jl-btn:focus {
text-decoration: none;
}
<a class='jl-btn' href='#'>Hello</a>
<a class='jl-btn jl-btn-important' href='#'>Hello</a>


选项 3:(如果您有多个修饰符并希望避免手动编写)

如果您觉得多次编写选择器也是不必要的重复,那么您可以编写一个 mixin(如下面的代码块),让它为所有需要的选择器设置 color

.jl-btn {
.set-anchor-colors(blue); /* mixin to set default, hover and focus color */
&.jl-btn-important {
.set-anchor-colors(red); /* mixin to set default, hover and focus color */
}
&:hover, &:focus {
text-decoration: none;
}
}

.set-anchor-colors(@color){
&, &:hover, &:focus{
color: @color;
}
}

关于css - 如何设置:hover color to normal color with Less?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35241655/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com