html.de - Stylesheet - Multi-Klassen - hover

by SpiceLab

HTML

<div class="Class-1">
  <div class="Class-3">
    .Class-3
  </div>
</div>
<div class="Class-2">
  <div class="Class-3">
    .Class-3
  </div>
</div>
<p>Abschließend ein Beispiel, was bei Mißachtung der Groß-/Kleinschreibung von ID/Klassen die Folge ist.</p>
<div id="id-1">
  <div class="id-1_class-1">
    .Id-1_class-1
  </div>
</div>

CSS

.Class-1, .Class-2 {
    padding:2rem;
    margin:.8rem
}
.Class-1 {
    background:yellow
}
.Class-2 {
    background:lightgreen
}
.Class-3 {
    padding:1rem;
    background:lightgray
}
.Class-1:hover .Class-3, .Class-2:hover .Class-3 {
  background:white;
  color:red
}
/* Negativbeispiel bzgl. nicht beachteter Groß-/Kleinschreibung */
#Id-1 { 
  padding:2rem;
  margin:.8rem;
  background:red;
  color:yellow
}
#Id-1:hover .Id-1_class-1 {
  background:yellow;
  color:red
}