# Nach :hover Event Unterelement verändern



## SonMiko (21. Juni 2011)

Hallo zusammen,

ich frage mich ob es mit CSS möglich ist, events auf andere als das gegenwärtig beschriebene Element anzuwenden.

Beispiel:

```
.meineklasse:hover ->.meineKlasseDarunter{
background-color:#000;
}
```


```
<div class="meineKlasse">
<div class="meineKlasseDarunter"></div>
</div>
```

Ist soetwas generell möglich?
Ich "hover" über eine Tabellenzeile (tr) und füge dadurch den Zellen (tds) eine Änderung hinzu?!

Es geht mir hierbei nur um reine CSS Lösungen, mir ist schon klar wie man es und das man es mit JQUERY innerhalb einer winzigen Zeile realisieren könnte.

Bin gespannt auf Eure Antworten,

Besten Gruß,

Mike


----------



## Bratkartoffel (21. Juni 2011)

Hi,

klar geht das.

```
table.meine_tabelle tr:hover td {
  background-color: red;
}
```

Gruß
BK

// Edit: Oder hier für deine DIVs, etwas anders:

```
div#test:hover .asd {
 background-color: red;
}
```


```
<div id="test">
  <div>
    ...
  </div>
  <div class="asd">
    ...
  </div>
  <div>
    ...
  </div>
</div>
```


----------



## SonMiko (21. Juni 2011)

Mist eben getestet da gings nicht -.- nun schon...

Vielen Dank Dir.


----------



## hela (21. Juni 2011)

Hallo, vielleicht hilft dir diese Demo auch weiter:

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>CSS-Selektor-Generationen</title>
    <style type="text/css">
      dt {font-weight: bold;}
      div {
        border: 1px solid #999;
        padding: 0.5em 1em;
      }
      .elternElement {
        background-color: #ffc; /* gelb */
      }
      .elternElement div {
        background-color: #ccf; /* blau */
      }
      .elternElement:hover > div {
        background-color: #fcc; /* rot */
      }
      .kindElement:hover + div {
        background-color: #cfc; /* grün */
      }
    </style>
  </head>
  <body>
<dl>
  <dt>Normal formatiert:</dt>
  <dd>Elternelement gelb, alle Nachkommen (Kinder, Enkel ..) blau.</dd>
  <dt>Maus über Elternelement:</dt>
  <dd>Direkte Kindelemente (Kind_1 und Kind_2) rot, Enkelement weiterhin blau.</dd>
  <dt>Maus über erstem Kindelement:</dt>
  <dd>Folgendes Geschwisterelement (Kind_2) grün.</dd>
</dl>

<div class="elternElement"> Eltern(-teil)
  <div class="kindElement">1. Kind
    <div class="enkelElement">Enkel</div>
  </div>
  <div class="kindElement">2. Kind</div>
</div>

  </body>
</html>
```
Dazu ist auch der Beitrag von John Resig interessant: XPath and CSS Selectors


----------

