Ergebnis 1 bis 6 von 6
Like Tree1Likes
  • 1 Post By jspit

Thema: Mit CSS Class eine andere Class ansprechen

  1. #1
    carieleido ist offline Eroberer
    registriert
    20-03-2009
    Beiträge
    62

    Mit CSS Class eine andere Class ansprechen

    Mit CSS Class eine andere Class ansprechen, also ändern, ohne JavaScript, wobei die zu ändernde Klasse nicht in der zu hovernden Klasse liegt, geht eigentlich nur mit JavaScript, heißt es oft im Netz. Deshalb habe ich eine CSS-Lösung geschrieben, einen so genannten Workaround.

    HTML-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html><head>
    <title>Mit CSS Hover andere Elemente ändern ohne JavaScript</title>
    <style type="text/css">
    .blau, .rot, .hover{
    background-color:#dddddd;
    border-color:#000000;
    border-style:dotted;
    border-width:1px;
    padding:5px 10px 5px 10px;
    position:absolute;
    }
    .blau{
    left:100px;
    top:100px;
    }
    .rot{
    left:200px;
    top:-50px;
    }
    .ebene1{
    cursor:default;
    height:0px;
    left:100px;
    position:absolute;
    top:100px;
    width:0px;
    }
    .ebene1:hover .blau{
    background-color:#66ccff;
    border-style:solid;
    }
    .ebene1:hover .rot{
    background-color:#ff6666;
    border-style:solid;
    }
    .ebene2:hover .blau{
    background-color:#dddddd;
    border-style:dotted;
    }
    .ebene2:hover .rot{
    background-color:#dddddd;
    border-style:dotted;
    }
    </style>
    </head><body>
    <div class="ebene1">
    <div class="hover">Hover</div>
    <div class="ebene2">
    <div class="blau">Blau</div>
    <div class="rot">Rot</div>
    </div>
    </div>
    </body>
    </html>

  2. #2
    Avatar von Arcsinh
    Arcsinh ist offline Kaiser
    registriert
    03-06-2010
    Beiträge
    1.392

    AW: Mit CSS Class eine andere Class ansprechen

    Schöne Arbeit!
    Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Goethe)

  3. #3
    HTML 4 YOU ist offline Haudegen
    registriert
    23-07-2010
    Beiträge
    508

    AW: Mit CSS Class eine andere Class ansprechen

    net schlecht

  4. #4
    Avatar von Junkee[]
    Junkee[] ist offline Lounge-Member
    registriert
    08-05-2009
    Ort
    Leonberg
    Beiträge
    3.169

    AW: Mit CSS Class eine andere Class ansprechen

    Das Problem ist, das man mit Selektoren immer nur auf Kindelemente zugreifen kann (ausnahmen bestätigen die Regel [http://www.w3.org/TR/css3-selectors/...ng-combinators, http://www.w3.org/TR/css3-selectors/...g-combinators]), im Beispiel gibt es deshalb eine Ebene, auf welcher sich die restlichen Elemente befinden. Nun wird das hover auf dieser Elternebene ausgelöst, wodurch die Kindelemente verändert werden können... Stimmt das?

  5. #5
    Avatar von jspit
    jspit ist offline Lounge-Member
    registriert
    19-06-2009
    Beiträge
    1.712

    AW: Mit CSS Class eine andere Class ansprechen

    Hab es jetzt erst angesehen, da ich mit CSS ein wenig auf Kriegsfuß stehe (sprich klappt nie so wie ich möchte). Aber klasse Idee !
    Möchte zur 'Übung' den Versuch einer Erklärung abgeben.
    Das ganze wird durchsichtiger, wenn man die div's ein wenig einrückt:
    PHP-Code:
    <div class="ebene1">
      <
    div class="hover">Hover</div>
      <
    div class="ebene2">
         <
    div class="blau">Blau</div>
         <
    div class="rot">Rot</div>
      </
    div>
    </
    div
    Jetzt wird deutlich, daß Hover, Blau und Rot alle unterhalb der ebene1 liegen. Hier zieht erstmal die CSS-Definition für die ebene1. Blau und Rot liegen zudem noch unter der ebene2, dessen hover die der ebene1 gewissermaßen überschreibt und die Elemente grau macht. Die Reihenfolge der Vereinbarungen ist entscheidend, man kann ja mal versuchsweise die .ebene2:hover vor die der ebene1 setzen oder entfernen, dann wird deutlich wie carieleido's Idee funktioniert.

  6. #6
    Avatar von jspit
    jspit ist offline Lounge-Member
    registriert
    19-06-2009
    Beiträge
    1.712

    AW: Mit CSS Class eine andere Class ansprechen

    Dieser Thread verdient eine Aktualisierung, da seit einiger Zeit neue Möglichkeiten mit CSS3 zur Verfügung stehen, welche obige Aufgabe stark vereinfachen.
    Dazu zählt der Following-sibling combinator (~), der zu den Geschwisterselectoren zählt.

    HTML-Code:
     <div >
        <div class="trigger">
          <h3>here mouse over</h3>
        </div>
    
        <p>Ein Absatz</p>
    
        <div>div 1 </div>
    
        <div class="show">div 2 show</div>
    
        <div>div 3</div>
    
        <div class="show">div 4 show</div>
     </div>
     <div class="show">div 5 (other level)</div>
    Per CSS möchte ich hier nun erreichen, das wenn die Maus über "here mouse over" schwebt alle folgenden divs mit der Klasse "show" einen grünen Hintergrund erhalten.

    CSS:
    Code:
    /* 
      Bei Mousover des Elementes div mit der Klasse trigger
      erhalten alle nachfolgenden div's der gleichen Ebene
      mit der Klasse show die Hintergrundfarbe grün
    */    
    div.trigger:hover ~ div.show{background-color:green;}
    Ein jsfiddle zum probieren.

    LG jspit
    mikdoe likes this.

Ähnliche Themen

  1. getElementById class ansprechen
    Von Myribo im Forum JavaScript
    Antworten: 6
    Letzter Beitrag: 13-01-2007, 19:08
  2. Womit öffne ich eine .class Datei?
    Von GymBo b im Forum Tools und Programme
    Antworten: 6
    Letzter Beitrag: 11-12-2006, 19:58
  3. Antworten: 3
    Letzter Beitrag: 06-04-2005, 22:49
  4. .class
    Von angeleyes im Forum Allgemeines
    Antworten: 5
    Letzter Beitrag: 13-07-2004, 13:55
  5. *.class ?
    Von Darki im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 13-08-2000, 18:38

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •