无代码冗余的SCSS特殊悬停效果

Question

我想在图表中显示具有特殊效果的框。

• 盒子应该有一个基于其类别的颜色(蓝色，橙色等)。
• 如果没有定义类别，它们应该有一个默认颜色(例如白色)。
• "Expandable"框应该以预定义的颜色显示(例如绿色)。
• 当鼠标指针在可扩展框上时，它们应该以其原始颜色显示(基于类别)。这是棘手的部分。
• 不能使用JavaScript。

我有一个可行的解决方案，但我至少有两个问题。

• 主要问题是需要在:hover选择器中明确/冗余地定义原始颜色。
• 第二个问题是CSS选择器的顺序不能自由改变，因为它会改变行为。

主要。scss内容:

$nodeDefaultColor: white;
$nodeCategory1Color: blue;
$nodeCategory2Color: orange;
$nodeExpandColor: green;
.container {
display:flex;
}
.container > div {
margin: 10px;
}
.node {
border-style: solid;
border-width: 2px;
border-color: black;
background-color: $nodeDefaultColor;
width: 100px;
height: 100px;
}
.nodeCategory1 {
background-color: $nodeCategory1Color;
}
.nodeCategory2 {
background-color: $nodeCategory2Color;
}
.nodeExpandable {
background-color: $nodeExpandColor;
cursor: pointer;
}
.node.nodeExpandable:hover {
background-color: $nodeDefaultColor;
}
.nodeCategory1.nodeExpandable:hover {
background-color: $nodeCategory1Color;
}
.nodeCategory2.nodeExpandable:hover {
background-color: $nodeCategory2Color;
}

index . html内容:

<link rel="stylesheet" href="main.css">
<div class="container">
<div class="node nodeCategory1"></div>
<div class="node nodeCategory2"></div>
<div class="node"></div>
<div class="node nodeCategory1 nodeExpandable"></div>
<div class="node nodeCategory2 nodeExpandable"></div>
<div class="node nodeExpandable"></div>
</div>

谢谢!

Answer 1

希望对你有帮助

$nodeDefaultColor: white;
$nodeCategory1Color: blue;
$nodeCategory2Color: orange;
$nodeExpandColor: green;
.container {
display:flex;
> div {
margin: 10px;
}
.node {
border-style: solid;
border-width: 2px;
border-color: black;
width: 100px;
height: 100px;
background-color: $nodeDefaultColor;
cursor: pointer;
&.nodeCategory1 {
background-color: $nodeCategory1Color;
&.nodeExpandable {
&:hover {
background-color: $nodeCategory1Color;
}
}
}
&.nodeCategory2 {
background-color: $nodeCategory2Color;
&.nodeExpandable {
&:hover {
background-color: $nodeCategory2Color;
}
}
}
&.nodeExpandable {
background-color: $nodeExpandColor;
cursor: pointer;
}
&:hover {
background-color: $nodeDefaultColor;
}
}
}

感谢