Ankündigung

Einklappen
Keine Ankündigung bisher.

mehrere DIV´s hovern

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    mehrere DIV´s hovern

    Morgen an alle,

    ich möchte gern mehrere DIV´s mit einmal durch ein Hover die Background-Color ändern.
    Jedoch klappt das nur wenn die betroffenen DIV´s noch keine Background-Color zuvor gesetzt bekommen haben.
    Ich möchte aber eine Background-Color setzen und diese bei einem Mouse Over ändern! ABER alle mit einmal sprich ich will das er die ganze Klasse ändert.
    HTML_Datei:
    HTML-Code:
    <html>
 <head>
 <link rel="stylesheet" type="text/css" href="test.css">
 </head>
 <body>
   <div id="FB14" class="FB14">
    <div id="FB14_Name" class="FB14">
      <h3>FB14</h3>
    </div>
    <div id="FB14_Anz-Sig" class="FB14"></div>
    <div id="FB14_Prod_Status" class="FB14">Status Prod</div>
   </div> 
   
 
 
 
 
 </body>
</html>

    CSS Datei:
    HTML-Code:
    div.FB14:hover{
  background-color:red;
}




div.FB14{
 width:110px;
 
 background-color: #85cfe8;
 
}
#FB14
{
 left:1188px;
 height:100px;
}
#FB14_Name
{ 
 height:50px;
 width:110px;
 position:absolute;
 text-align: center;
 /*
 display: table;
 width: 100%;
 */
}
#FB14_Anz-Sig
{ 
 margin-top:50px;
 height:50px;
 width:55px;
 float:left;
 
}
#FB14_Prod_Status
{
 margin-top:50px;
 height:50px;
 width:55px;
 float:right;
}
    Danke vorab schon mal für eure Mühe
    Stichworte: -
  • #2
    Hallo,

    CSS arbeitet "seriell", setz mal die .hover-regel unter die Standard-Regel.
    Wobei dann weiterhin nicht alle betroffen sein dürften, weil sich das Hover-Ereignis auf ein Element bezieht.
    Competence-Center -> Enjoy the Informatrix
    PHProcks! • Einsteiger freundliche Tutorials • PreComposed Packages

    Kommentar

    • #3
      ändere mal die erste Zeile CSS auf
      Code:
      div.FB14:hover>div{




      Kommentar

      • #4
        Beschäftige dich ein bisschen mehr mit CSS3 Siblings und Child Selektoren

        Mal ein Beispiel für CSS sibling selector (Geschwisterselektor)
        HTML-Code:
        <!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <title>CSS siblings</title>
    <style>
    div {background-color:inherited;}
    div.FB14:hover {background-color:blue;}
    div.FB14:hover + div{background-color:red;}
    div.FB15:hover {background-color:green;}
    </style>
</head>

<body>
    <div id="FB14" class="FB14">
        <div id="FB14_Name" class="FB14">
            <h3>FB14</h3>
        </div>
        <div id="FB14_Anz-Sig" class="FB14"></div>
        <div id="FB14_Prod_Status" class="FB14">Status Prod</div>
    </div>
    <div class="FB15">
        <p>Geschwister Div</p>
    </div>
</body>

</html>
        Einführung und schöne Anleitung: https://developer.mozilla.org/de/docs/Web/CSS

        Kommentar

        • #5
          gebe ich der Klasse .FB14 eine Hintergrundfarbe müsste beim :hover "#FB14_Anz-Sig" bei Deinem Beispiel nur dieses Element einen blauen Hintergrund erhalten und '#FB15' einen roten Hintergrund erhalten. Er wollte, sofern ich das richtig verstanden habe, die 3 Div´s innerhalb '#FB14' mit einem Hintergrund versehen. Dann ist '>' schon richtig.

          Kommentar

          • #6
            Ich glaube eher, dass beides richtig ist, denn er spricht von allen FB14.
            Das können lt. Eingangsthread sowohl die > als auch die + Siblings sein...

            Die Frage, die sich mir stellt ist, warum man sowas möchte?!

            Competence-Center -> Enjoy the Informatrix
            PHProcks! • Einsteiger freundliche Tutorials • PreComposed Packages

            Kommentar

            • #7
              nein, gebe ich .FB14 eine Farbe erhalten nicht alle .FB14 beim :hover die gleiche HIntergrundfarbe.

              https://jsfiddle.net/rh8tq5wz/

              Bei '>' schon,

              https://jsfiddle.net/rh8tq5wz/2/

              Kommentar

              • #8
                Sofern die DIV's so verschachtelt bleiben, ich vermute aber, dass die DOM-Struktur produktiv anders aussieht.
                Ansonsten wäre Deine Variante korrekt...
                Competence-Center -> Enjoy the Informatrix
                PHProcks! • Einsteiger freundliche Tutorials • PreComposed Packages

                Kommentar

                • #9
                  @kaminbausatz
                  bei deinem 2.Link Beispiel brauchst du doch gar kein Kindselektor, der normale Nachfahrenselektor tuts dann auch.
                  Und wenn er das nur auf die Klasse beziehen will, darf man auch nur die Klasse nehmen, sonst wären alle Divs darunter betroffen, auch die, welche die Klasse nicht haben, sofern ich es diesmal richtig verstanden habe.
                  HTML-Code:
                  div.FB14:hover .FB14{
  background-color:red;
}

                  Kommentar

                  • #10
                    Die sollten ja auch betroffen sein..., wenn wir nur wüssten was er genau will. Was soll´s, es führen so viele Wege zum Ziel.

                    Kommentar

                    • #11
                      Zuletzt geändert von jspit; 28.07.2016, 12:06. Grund: Ergänzung
                      Geht es hier verallgemeinert um das Problem, fremde Objekte zu hovern?
                      Hab dafür schnell mal ein jsfiddle gemacht.
                      Geht man dort mit der Maus über das Element "hover", wird nicht der Hintergrund von "hover" geändert, sondern die der Elemente "rot" und "blau".
                      Die Idee dazu stammt aus dem forum.jswelt.de.
                      Auch wenn das Beispiel im ersten Beitrag, was schon etwas älter ist, nicht die obige Aufgabenstellung trifft, kann dies doch zum Verständnis der Problematik beitragen.
                      ​Das Beispiel von protestix #3 zeigt aber schon eine mögliche Lösung.

                      Edit: Der letzte Beitrag im forum.jswelt.de zeigt ein Beispiel mit dem Following-sibling combinator (~).

                      Kommentar

                      Vorherige Weiter
                      Lädt...
                      X