Vererbung von Hover

[Ensaw]

Hallo,

ich habe ein Problem meinem Hover.

Ich möchte, dass wenn ein Div mit der Maus betreten wird, alle div's in diesem Div aktiviert werden. Jedes div hat nen anderen Hover, deswegen kann ich da nicht die "normale" vererbung die ich kenne Anwenden.

Ich könnte es mit Pseudocode ausdrücken was ich will.

Wenn Maus in Box1, dann Box1:hover, Box2:hover, etc..

Ein bekannter gab mir den Tipp, man könnte diese Hover mit einem "+" verbinden, was ich für recht schwachsinnig halte.

 

[SpiceLab]

Wie wäre es mit der Kombination von CSS3 :nth-child() Selector?

<div id="box">
  <div>box1</div>
  <div>box2</div>
  <div>box3</div>
</div>

div#box:hover div:nth-child(1) {...}
div#box:hover div:nth-child(2) {...}
div#box:hover div:nth-child(3) {...}

 

[Ensaw]

Mein Problem ist auf dieser Seite zu sehen: Hier klicken

Was ich dort meine ist, dass dort unten 12 Beitragsboxen sind. Wenn man dort in eine Box "reinfährt" kommt erst ein Borderhover. Wenn man dann auf das Bild zu dem Beitrag geht, aktiviert sich der nächste Hover mit ganz anderen Eigenschaften.

Meine Frage ist nun, wie schaffe ich es, dass beide Hover aktiviert werden wenn ich die Box anfasse?

 

[SpiceLab]

Indem das eingebettete Grafikelement in einem Nachfahren-Selektor über die :hover-Pseudoklasse seines Elternelements die (Hover-)Formatierung erhält.

<div class="Bezeichnername">
  ...
  <img ... />
  ...
</div>

div.Bezeichnername:hover {border-Eigenschaft}
div.Bezeichnername:hover img {opacity-Eigenschaft}