Nach :hover Event Unterelement verändern

SonMiko

SonMiko

Erfahrenes Mitglied
Hallo zusammen,

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

Beispiel:
Code: 
.meineklasse:hover ->.meineKlasseDarunter{
background-color:#000;
}
Code: 
<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
 
Hi,

klar geht das.
CSS: 
table.meine_tabelle tr:hover td {
  background-color: red;
}

Gruß
BK

// Edit: Oder hier für deine DIVs, etwas anders:
CSS: 
div#test:hover .asd {
 background-color: red;
}
HTML: 
<div id="test">
  <div>
    ...
  </div>
  <div class="asd">
    ...
  </div>
  <div>
    ...
  </div>
</div>
 
Zuletzt bearbeitet:
Hallo, vielleicht hilft dir diese Demo auch weiter:
HTML: 
<!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
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück