Lufti: Frage zum Hover-Effekt

Hallo liebe Community,
meine Frage lautet: Kann ich den Hover-Effekt auch "rückwärts" einsetzen?

Beispiel:
In einem DIV-Container ist ein Link. Bei a:hover soll sich dann der Hintergrund des Containers ändern (nicht des Links).

Falls das mit CSS nicht geht, wie dann?

Danke schonmal im Voraus ;-)

  1. Hallo!

    meine Frage lautet: Kann ich den Hover-Effekt auch "rückwärts" einsetzen?

    Nein, solange es noch keinen "Parent" Selektor in CSS gibt.

    Beispiel:
    In einem DIV-Container ist ein Link. Bei a:hover soll sich dann der Hintergrund des Containers ändern (nicht des Links).

    Falls das mit CSS nicht geht, wie dann?

    Ginge mit CSS nur insofern, als dass du dem Div Element die :hover Styles gibst (was vermutlich nicht das ist, was du erreichen möchtest).

    Mit Javascript kannst du den in CSS fehlenden Parent Selektor leicht ersetzen.
    In jQuery gibt es dafür bspw. 'parent()'.

    Gruß Gunther

    1. Schade, schade!
      Naja da muss ich mal sehen, was ich da machen kann. Mit JavaScript kenne ich mich leider nicht aus.

      1. Semantisch noch einigermaßen ok wäre es, wenn Du statt des divs ein a-tag nimmst und es als block deklarierst.

        So was in der Art: http://jsfiddle.net/Thermopyle/qkLaG/

        1. Hallo!

          Semantisch noch einigermaßen ok wäre es, wenn Du statt des divs ein a-tag nimmst und es als block deklarierst.

          Er hat doch ein 'A' Element, nur dass sich dieses halt in einem 'Div' Element befindet (in dem sich wahrscheinlich mehrere 'A' Elemente befinden).

          So was in der Art: http://jsfiddle.net/Thermopyle/qkLaG/

          Wozu das 'span' Element?

          Gruß Gunther

          1. Wozu das 'span' Element?

            Gruß Gunther

            Naja, das a übernimmt durch die Deklaration als block die Funktion des divs, also des Containers. Anders gesagt, die Tag-Tiefe bleibt, die Tag-Elemente ändern sich*. Das span ist dann das ehemalige a. Zwingend nötig ist letzteres natürlich nicht. Könnten aber auch mehrere Inhalte sein, z.B. noch ein img usw. Hab’s so als Beispiel dafür genommen, dass innerhalb des a – trotz Umdeklaration zum Block – nur inline-Elemente vorkommen sollten. Aber vielleicht beantwortet das auch gar nicht wirklich die Ausgangsfrage :)

            *statt

            <div><a></a></div>

            jetzt

            <a><span></span></a>

            1. Hallo!

              Naja, das a übernimmt durch die Deklaration als block die Funktion des divs, also des Containers. Anders gesagt, die Tag-Tiefe bleibt, die Tag-Elemente ändern sich*. Das span ist dann das ehemalige a. Zwingend nötig ist letzteres natürlich nicht. Könnten aber auch mehrere Inhalte sein, z.B. noch ein img usw. Hab’s so als Beispiel dafür genommen, dass innerhalb des a – trotz Umdeklaration zum Block – nur inline-Elemente vorkommen sollten.

              Letzteres gilt nur, wenn der OP kein HTML5 verwendet, denn in HTML5 sind auch Blocklevel Elemente innerhalb von 'A' Elementen erlaubt.

              Der andere entscheidende Punkt ist aber die Frage, ob das 'Div' Element *mehrere* 'A' Elemente beinhaltet, oder nicht. Denn *verschachtelte* 'A' Elemente sind in keinem Fall erlaubt.

              Aber vielleicht beantwortet das auch gar nicht wirklich die Ausgangsfrage :)

              Um die letztendlich genauer zu beantworten, müsste uns der OP noch einige mehr Informationen geben. ;-)

              Gruß Gunther

              1. Ja also das ganze ist eine Karte. wenn man über einen Bereich/Raum der Karte geht soll dieser sich verändern. Da kam mir die Idee mit dem MAP-Tag. Da kann man aber leider nur rechteckige Elemente einbauen. Also wäre dann quasi die Idee, die einzelnen Pixel damit zu bearbeiten (viel Arbeit aber war die einzige Idee).
                Mit Flash ginge das ganze zwar auch aber das ist aus technischen Gründen nicht möglich.
                Soweit alles verstanden? Ich hoffe ich konnte es trotz meiner Ratlosigkeit halbwegs verständlich ausdrücken :D

                1. Hallo!

                  Ja also das ganze ist eine Karte. wenn man über einen Bereich/Raum der Karte geht soll dieser sich verändern.

                  Was heißt "soll dieser sich verändern"?
                  Du möchtest also etwas in dieser Art, richtig?

                  Falls ja, kommst du AFAIK mit dem CSS Hover-Effekt hier nicht weiter. Dann müsstest du auf eine entsprechende Javascript Variante zurückgreifen.

                  Da kam mir die Idee mit dem MAP-Tag. Da kann man aber leider nur rechteckige Elemente einbauen.

                  Wie kommst du darauf!?
                  Siehe: http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm#definieren

                  Ich hoffe ich konnte es trotz meiner Ratlosigkeit halbwegs verständlich ausdrücken :D

                  Wenn ich dich richtig verstanden habe - ja! ;-)

                  Gruß Gunther

                  1. Wie kommst du darauf!?
                    Siehe: http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm#definieren

                    Ach man.. Damit hab ich schon so lange nicht mehr gearbeitet. Da bin ich schon total raus :D

                  2. Was heißt "soll dieser sich verändern"?
                    Du möchtest also etwas in dieser Art, richtig?

                    Ja genau sowas brauche ich.

                    Falls ja, kommst du AFAIK mit dem CSS Hover-Effekt hier nicht weiter. Dann müsstest du auf eine entsprechende Javascript Variante zurückgreifen.

                    Mit Javascript habe ich nur leider nichts am Hut :/

        2. Semantisch noch einigermaßen ok wäre es, wenn Du statt des divs ein a-tag nimmst und es als block deklarierst.

          Imho ist Javascript gegenüber SINNLOSEM (ja, es ist SINNLOS) Markup stark zu bevorzugen. Ansonsten können wir gleich wieder <b> benutzen. Es ist einfach nur traurig dass es keinen parent-selektor gibt und die Begründung dafür ist dermaßen lächerlich, dass es sogar noch trauriger wird.
          Also: einfach mit Javascript machen und sobald dann das passende CSS da ist durch eben dieses ersetzen. Besucher ohne Javascript haben eben Pech gehabt. Ich z.B.. Aber ich habe kein Problem das dann für die Seite einzuschalten, also alles gut.