Svenja: :hover nur für «a»?

SELF-Forum

:hover nur für «a»?

Svenja
– Informationen zu den Bewertungsregeln

Hallo zusammen,

kann es sein, daß die pseudo-class :hover nur bei Links greift? In der W3 Doku (http://www.w3.org/TR/PR-CSS2/) konnte ich nichts über eine solche Beschränkung finden, aber es scheint nicht zu funktionieren....

Ziel ist es, eine Tabellenzelle beim Mouseover mit einer anderen Hintergrundfarbe zu versehen.

Wäre super, wenn euch dazu etwas einfällt - auch wenn es nur ein schlichtes "geht wirklich nicht" ist...

Grüße,
Svenja

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. :hover nur für «a»?

    Thomas J.S.
    – Informationen zu den Bewertungsregeln

    Hallo Svenja!

    kann es sein, daß die pseudo-class :hover nur bei Links greift?

    So ist es, und das auch nur im IE.

    »»In der W3 Doku (http://www.w3.org/TR/PR-CSS2/) konnte ich nichts über eine solche Beschränkung finden,
    »»

    Nur die Browserhersteller wissen warum sie das nicht implementiert haben.

    Ziel ist es, eine Tabellenzelle beim Mouseover mit einer anderen Hintergrundfarbe zu versehen.

    auch wenn es nur ein schlichtes "geht wirklich nicht" ist...

    Gehen tut es, mit Javascript.
    leicht für den IE:
    <style type="text/css">
    <!--
    .tdbg1 { background-color:blue; }
    .tdbg2 { background-color:red; }
    //-->
    <style>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function rollon() {
       if(window.event.srcElement.className == "tdbg1")
       {
         window.event.srcElement.className = "tdbg2";
       }
    }

    function rolloff() {
       if (window.event.srcElement.className == "tdbg2")
       {
         window.event.srcElement.className = "tdbg1";
       }
    }

    document.onmouseover = rollon;
    document.onmouseout = rolloff;
    // -->
    </SCRIPT>

    <table><tr>
    <td class="tdbg1">heureka</td>
    <td class="tdbg1">es lebt</td>
    </tr></table>

    Für den NS gibt ein textrollover unter
    http://www.webreference.com/js/ ob das auch beim <td> greift weiss ich nicht.

    Grüße
    Thomas

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. :hover nur für «a»?

    Stefan Muenz
    – Informationen zu den Bewertungsregeln

    Hallo Svenja,

    kann es sein, daß die pseudo-class :hover nur bei Links greift?

    Ja, weil es ein feststehendes Pseudoformat ist.

    Ziel ist es, eine Tabellenzelle beim Mouseover mit einer anderen Hintergrundfarbe zu versehen.

    Da hover derzeit sowieso nur mit MSIE 4 oder hoeher funktioniert, kannst du dieses Ziel auch mit DHTML nach MSIE-Syntax erreichen:

    <td bgcolor="#FFFFFF" onMouseover="this.style.backgroundColor='#FFFF00'"
    onMouseout="this.style.backgroundColor='#FFFFFF'">...</td>

    Getestet hab ich's jetzt allerdings nicht.

    viele Gruesse
      Stefan Muenz

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. :hover nur für «a»?

    Florian Bender
    – Informationen zu den Bewertungsregeln

    Hallo zusammen,

    kann es sein, daß die pseudo-class :hover nur bei Links greift? In der W3 Doku (http://www.w3.org/TR/PR-CSS2/) konnte ich nichts über eine solche Beschränkung finden, aber es scheint nicht zu funktionieren....

    Ziel ist es, eine Tabellenzelle beim Mouseover mit einer anderen Hintergrundfarbe zu versehen.

    Wäre super, wenn euch dazu etwas einfällt - auch wenn es nur ein schlichtes "geht wirklich nicht" ist...

    Grüße,
    Svenja

    Hallo Svenja,

    so weit ich weiß, funktioniert :hover wirklich nur bei Links, ich hab' aber mal 'ne Pseudo-Lösung geschrieben, die zwar nicht die Hindergrundfarbe der Zelle ändert, aber die Farbe und Hintergrundfarbe eines Links darin.  Der Link hat die selbe Farbe und Hintergrundfarbe, so daß man davon nix sieht, außer den Hand-Cursor (den Du beim MSIE ja mit CSS auch verändern kannst).  Du kannst ja ein wenig damit herumexperimentieren:

    <html>
    <head>
    <title></title>
    <style type="text/css">
    a:link { color:#AA5522; background-color:#AA5522 }
    a:visited { color:#AA5522; background-color:#AA5522 }
    a:active { color:#99FF99; background-color:#99FF99 }
    a:hover { color:#99FF99; background-color:#99FF99 }
    </style>
    </head>
    <body>
    <table border=1>
    <tr><td><a href="http://www.teamone.de/selfaktuell">Test</a></td>
    <td>Daten</td>
    </tr>
    <tr>
    <td>Daten</td>
    <td>Daten</td>
    </tr>
    </table>
    </body>
    </html>

    Ich hoffe ich konnte Dir helfen.

    Florian Bender

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln