Stacking Box-Schatten in mehreren CSS-Selektoren

Question

Ich mache ein kleines Spiel in Eml, und ich benutze CSS für die Visualisierung. Ich habe ein Gitter mit Zellen, alle bekommen die Klasse cell. Allerdings gibt es auch eine, die die Klasse selected mit offensichtlichen Gebrauch hat.

Nun, dies dem Benutzer sichtbar zu machen ich die folgende CSS haben:

.game .cell:hover { 
    box-shadow: inset 0 0 5px rgba(200, 50, 50, 1); 
} 
.game .cell.selected { 
    box-shadow: 0 0 5px rgba(50, 50, 200, 1); 
} 

So fügt dieser einen Schatten auf die Zelle, die Sie zur Zeit über schweben, und eine andere, wenn die Zelle ausgewählt ist. Wenn Sie jedoch den Mauszeiger über den aktuell ausgewählten bewegen, wird nur der "ausgewählte Schatten" angezeigt, nicht beide.

Eine einfache Lösung natürlich ist dies hinzuzufügen:

.game .cell.selected:hover { 
    box-shadow: 0 0 5px rgba(50, 50, 200, 1), inset 0 0 5px rgba(200, 50, 50, 1); 
} 

Dann funktioniert es sowohl für die, so dass groß ist. Allerdings ist es nicht perfekt. Was passiert, wenn ich den Hover-Effekt ändere, dann muss ich auch den ausgewählten + Hover-Effekt ändern.

So gibt es doppelte Daten, und meine Frage ist: Kann das gleiche erreicht werden, ohne Daten zu duplizieren?

Hinweis: Ich frage mich, über eine reine CSS-Lösung, keine Extra Bibliotheken wie SASS oder ähnliche wenn möglich.

Answer 1

Sie können einen kleinen Trick tun und ein Pseudo-Element verwenden:

.cell { 
 
    width: 100px; 
 
    height: 100px; 
 
    display: inline-block; 
 
    border: solid 1px; 
 
    position: relative; 
 
} 
 

 
.cell:hover { 
 
    box-shadow: inset 0 0 5px rgba(200, 50, 50, 1); 
 
} 
 
.cell.selected:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    box-shadow: 0 0 5px rgba(50, 50, 200, 1); 
 
}

<div class="cell"></div> 
 
<div class="cell selected"></div>