Mellanie: Link überfahren = Farbe ändert sich

Hallo,

Ich habe mal gesehen, dass sich die Zellenfarbe in der sich der Link befindet verändert.

Geht man mit dem Mauszeiger über einen Textlink verändert er seine Farbe:

a:link    { color: #FF0000;}
a:visited { color: #00FF00;}
a:hover   { color: #0000FF;}

Wie kann man beim überfahren des Links den komplette Zellenfarbe in der sich der Link befindet verändert?

ich habe das mal so ausprobiert:

a:hover   { color: #0000FF; background-color:#b5b596}

Der Hintergrund des Links verändert sich, aber nicht die komplette Zelle in der sich der Link befindet. Wie geht das?

  1. Wie kann man beim überfahren des Links den komplette Zellenfarbe in der sich der Link befindet verändert?
    ich habe das mal so ausprobiert:
    a:hover   { color: #0000FF; background-color:#b5b596}
    Der Hintergrund des Links verändert sich, aber nicht die komplette Zelle in der sich der Link befindet. Wie geht das?

    Mit einem Selektor kannst du keine Eigenschaften von Parent-Elementen verändern.

    Du kannst aber den Eindruck schinden bei:
    td a {display:block; height:100%;}

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
    1. Du kannst aber den Eindruck schinden bei:
      td a {display:block; height:100%;}

      Was (ausser das Unvermögen ganz alter Internet Exploder) spricht gegen :hover auf td-Elemente?

      1. Hi,
        kannst Du mir die Lösung verraten. Was muß ich genau tun. Die CSS Daten sind ausgelagert. Muß ich zusätzlich noch was im html Code ändern?

        Was (ausser das Unvermögen ganz alter Internet Exploder) spricht gegen :hover auf td-Elemente?

        1. kannst Du mir die Lösung verraten. Was muß ich genau tun. Die CSS Daten sind ausgelagert.

          die :hover-Pseudoklasse die du jetzt auf a-Elemente anwendest, kannst du Problemlos auch auf td-Elemente anwenden.

          Muß ich zusätzlich noch was im html Code ändern?

          Nein.

          1. Habe mal das hier eingegeben:

            td:hover  {background-color:#FFFF00}

            Klappt so nicht.

            die :hover-Pseudoklasse die du jetzt auf a-Elemente anwendest, kannst du Problemlos auch auf td-Elemente anwenden.

            1. Habe mal das hier eingegeben:

              td:hover  {background-color:#FFFF00}

              Klappt so nicht.

              Definiere "klappt so nicht".

              1. @@suit:

                nuqneH

                td:hover  {background-color:#FFFF00}
                Klappt so nicht.

                Definiere "klappt so nicht".

                https://forum.selfhtml.org/?t=194287&m=1298885 ;-)

                Klappt so nicht für den Nutzer.

                Qapla'

                --
                Volumen einer Pizza mit Radius z und Dicke a: pi z z a
              2. Es passiert nichts wenn ich mit der Maus über den Link fahre.

                Definiere "klappt so nicht".

                1. Hallo,

                  Definiere "klappt so nicht".
                  Es passiert nichts wenn ich mit der Maus über den Link fahre.

                  dann hast du wohl einen IE6 (oder noch älter). Dass der dazu nicht in der Lage ist, hat suit ja schon angedeutet (IE bis Version 6 kann :hover nur auf Links anwenden).

                  Ciao,
                   Martin

                  --
                  Wer schläft, sündigt nicht.
                  Wer vorher sündigt, schläft besser.
                  1. Hi,

                    ich habe den IE 8, und damit klappt es nicht!!!

                    dann hast du wohl einen IE6 (oder noch älter).

                    1. ich habe den IE 8, und damit klappt es nicht!!!

                      Wie lautet dein DOCTYPE?

                      mfg Beat

                      --
                      ><o(((°>           ><o(((°>
                         <°)))o><                     ><o(((°>o
                      Der Valigator leibt diese Fische
                    2. Hi,

                      ich habe den IE 8, und damit klappt es nicht!!!

                      Ich habe IE6, IE7, IE8, opera 9, FF2 und FF3.5.
                      Klappt bei mir überall außer im IE6.

                      Hoffe ich konnte helfen!!!

                      ~dave

                    3. ich habe den IE 8, und damit klappt es nicht!!!

                      Wo kann man das sehen?

                      1. @@suit:

                        nuqneH

                        ich habe den IE 8, und damit klappt es nicht!!!

                        Wo kann man das sehen?

                        Im Quirksmodus.

                        Qapla'

                        --
                        Volumen einer Pizza mit Radius z und Dicke a: pi z z a
                        1. Im Quirksmodus.

                          Da war ich noch nicht - wie ist es dort so? :p

                          1. @@suit:

                            nuqneH

                            Im Quirksmodus.

                            Da war ich noch nicht - wie ist es dort so? :p

                            Avantgardistisch. Ein bisschen einsam.* Fernab vom Mainstream.**

                            Qapla'

                            * Nur Der Martin ist hier ab und zu anzutreffen.

                            ** Manche sagen auch Standards dazu.

                            --
                            Volumen einer Pizza mit Radius z und Dicke a: pi z z a
                    4. ich habe den IE 8, und damit klappt es nicht!!!

                      Man kann jede CSS- Angabe ja auch überschreiben oder mit !important ausser Kraft setzen. Auch Kinder können sehr hinderlich sein ;-) Beispiele:

                      td {background-color:#FFFFFF!important} /* z.B. ausgelagerte Datei */

                      td:hover  {background-color:#FFFF00}
                      div {background-color:#FF0000}

                      <td><div>...</div></td>

                      Kalle

      2. @@suit:

        nuqneH

        Was (ausser das Unvermögen ganz alter Internet Exploder) spricht gegen :hover auf td-Elemente?

        In dem Fall: dass es für den Nutzer verwirrend ist, wenn ein Hovereffekt auch dort ist, wo er gar keinen Link anclicken kann.

        Qapla'

        --
        Volumen einer Pizza mit Radius z und Dicke a: pi z z a
        1. In dem Fall: dass es für den Nutzer verwirrend ist, wenn ein Hovereffekt auch dort ist, wo er gar keinen Link anclicken kann.

          Ansichtssache - eine komplette Tabellenzeile zum erleichtern der Lesbarkeit hervorzuheben - auch wenn sie nicht klickbar ist - hat für mich durchaus keinen Verwirrenden Effekt.

          Bei einzelnen Zellen ist das natürlich grenzwertig.

          1. In dem Fall: dass es für den Nutzer verwirrend ist, wenn ein Hovereffekt auch dort ist, wo er gar keinen Link anclicken kann.

            Ansichtssache - eine komplette Tabellenzeile zum erleichtern der Lesbarkeit hervorzuheben - auch wenn sie nicht klickbar ist - hat für mich durchaus keinen Verwirrenden Effekt.

            Das habe ich bei phpMyAdmin gesehen und auf einigen Seiten umgesetzt.

            Noch wichtiger finde ich aber, dass man in Listen einzelne Zeilen per Klick einfärben kann. Bei der Abarbeitung einer Liste (z.B. Mails schreiben) ist das _sehr_ hilfreich. Auch hilfreich, wenn eine Zeile breiter ist als das Fenster. Einfach anklicken und dann scrollen. Beim Nur- Mouseovereffekt geht die Markierung ja verloren, wenn man den Scrollbalken bedient.