Special hover effect with SCSS without code redundancy - html

Question

I would like to display boxes with special effects in a diagram.
The boxes should have a color based on their category (blue, orange, etc).
If the category is not defined, they should have a default color (e.g. white).
"Expandable" boxes should be displayed in a predefined color (e.g. green).
When the mouse pointer is over an expandable box, they should be displayed in their original color (based on the category). This is the tricky part.
No JavaScript should be used.
I have a working solution, but I have at least two concerns with it.
Primary problem is that the original colors need to be explicitly/redundantly defined in the :hover selectors.
Secondary problem is that the order of the CSS selectors cannot be changed freely, because it will change the behavior.
main.scss contents:
$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 contents:
<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>
Thanks!

Answer 1

Hope it's Help You
$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;
}
}
}
Thanks