tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
3
ZUGRIFFE
865
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 21.06.11 13:56 #1
    Avatar von SonMiko
    SonMiko SonMiko ist offline Mitglied Platin
    Registriert seit
    Jun 2005
    Beiträge
    662
    Hallo zusammen,

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

    Beispiel:
    Code :
    1
2
3

    .meineklasse:hover ->.meineKlasseDarunter{
background-color:#000;
}
    Code :
    1
2
3

    <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
     
    Besten Gruß,

    Mike
    Zitieren Zitieren
  2. 21.06.11 14:14 #2
    Avatar von Bratkartoffel
    Bratkartoffel Bratkartoffel ist offline gebratene Kartoffel
    tutorials.de Premium-User
    Registriert seit
    Jun 2007
    Ort
    Passau (Niederbayern)
    Beiträge
    1.394
    Hi,

    klar geht das.
    Code css:
    1
2
3

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

    Gruß
    BK

    // Edit: Oder hier für deine DIVs, etwas anders:
    Code css:
    1
2
3

    div#test:hover .asd {
 background-color: red;
}
    HTML-Code:
    <div id="test">
  <div>
    ...
  </div>
  <div class="asd">
    ...
  </div>
  <div>
    ...
  </div>
</div>
    Geändert von Bratkartoffel (21.06.11 um 14:18 Uhr)
     
    Über eine gute Bewertung freut sich jeder ;)
    Bitte erledigte Threads als "Erledigt" markieren.

    "Though a program be but three lines long, someday it will have to be maintained.''
    -- Geoffrey James, "The Tao of Programming"
    Zitieren Zitieren
  3. 21.06.11 14:23 #3
    Avatar von SonMiko
    SonMiko SonMiko ist offline Mitglied Platin
    Registriert seit
    Jun 2005
    Beiträge
    662
    Mist eben getestet da gings nicht -.- nun schon...

    Vielen Dank Dir.
     
    Besten Gruß,

    Mike
    Zitieren Zitieren
  4. 21.06.11 15:11 #4
    Avatar von hela
    hela hela ist gerade online Mitglied Smaragd
    tutorials.de Premium-User
    Registriert seit
    Oct 2004
    Beiträge
    1.123
    Hallo, vielleicht hilft dir diese Demo auch weiter:
    HTML-Code:
    <!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
    Geändert von hela (21.06.11 um 17:54 Uhr) Grund: Falsche Achsenbezeichnung korrigiert
     
    Zitieren Zitieren
« IE 5.5 u. 6 PNG Transparenz Problem | CSS von Navigationsleiste mit verschiedenen Background-Images Browser Kompatibilität »

Ähnliche Themen

  1. jQuery nach Ajax- Event starten
    Von Sprint im Forum Javascript & Ajax
    Antworten: 6
    Letzter Beitrag: 11.07.10, 07:05
  2. Mehrere PictureBoxen mit MouseDown Event verändern
    Von ibktp im Forum .NET Windows Forms
    Antworten: 6
    Letzter Beitrag: 18.12.09, 17:10
  3. JS erst nach 1sek bei hover ausführen
    Von psifactory im Forum Javascript & Ajax
    Antworten: 5
    Letzter Beitrag: 11.06.08, 15:44
  4. a:hover Background verändern
    Von Dennis-S. im Forum CSS
    Antworten: 9
    Letzter Beitrag: 28.11.03, 20:22
  5. hover größe verändern
    Von sonicks im Forum CSS
    Antworten: 2
    Letzter Beitrag: 24.10.01, 19:34

Stichworte