gpt4 book ai didi

html - 扩展 & :hover of any class to any other class's hover in SASS or SCSS

转载 作者:太空宇宙 更新时间:2023-11-04 14:31:57 24 4
gpt4 key购买 nike

有没有办法将任何类的 &:hover 扩展到任何其他类的悬停?

我的代码是这样的,它停止了两个类的悬停:

HTML

<a href="#" class="button1">Button 1</a>
<a href="#" class="button2">Button 2</a>

SCSS

.button1 {
background: black;
padding: 5px 10px;
text-decoration: none;
color: white;
&:hover {
background: red;
}
}

.button2 {
background: blue;
padding: 5px 10px;
text-decoration: none;
color: white;
&:hover {
@extend .button1:hover
}
}

最佳答案

您可以使用占位符。

%hover {
background: red;
}

.button1 {
background: black;
padding: 5px 10px;
text-decoration: none;
color: white;
&:hover {
@extend %hover;
}
}

.button2 {
background: blue;
padding: 5px 10px;
text-decoration: none;
color: white;
&:hover {
@extend %hover;
}
}

或者,也许更好的解决方案是为您的按钮使用更通用的类:

.btn {
padding: 5px 10px;
text-decoration: none;
color: white;

&:hover {
background: red;
}
}

.btn--1 {
background: black;
}

.btn--2 {
background: blue;
}

关于html - 扩展 & :hover of any class to any other class's hover in SASS or SCSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34350513/

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