CSS Definition für Änderung der Hintergrundfarbe bei Hover

Flitz · 13. Juni 2006

1. Wie muss ich den Style in meiner CSS Datei definieren wenn ich bei einer Tabelle möchte das wenn man mit der Maus über eine Zeile fährt sich die Hintergrundfarbe ändert???

2. Kann ich eine Zeile so definieren das die gesamte Zeile ein Link ist (egal wo man hin klickt) oder muss ich das immer auf den Inhalt der Zeile beziehen?

CyberDemon · 13. Juni 2006

1. Wie muss ich den Style in meiner CSS Datei definieren wenn ich bei einer Tabelle möchte das wenn man mit der Maus über eine Zeile fährt sich die Hintergrundfarbe ändert???

CSS

.zeile:hover

{

  background-color:#efefef;

}[/PHP]

HTML

[PHP]<tr class="zeile">bla</tr>

Mal auf die schnelle getippt, sollte so funktionieren.

geloescht_JesterDay · 13. Juni 2006

Mal auf die schnelle getippt, sollte so funktionieren.

Bei allen Browsern (außer manche alte Versionen), außer dem IE. Der IE kennt die Pseudoklasse :hover nur für Links.

Und Nein, du kannst keine Zeile in einen Link setzen. Ein Link-Tag darf nur Inline-Elemente (außer a) enthalten.

siehe hier

Flitz · 13. Juni 2006

Hi, so in etwa habe ich mir das gedacht! Allerdings funktioniert es nicht!

Mein Eintrag im css:



.table		 {font-family: helvetica, arial, geneva, sans-serif; font-size:12; color:#000000 }

.table:hover     {font-family: helvetica, arial, geneva, sans-serif; font-size:12; color:#ffffff; background-color:#FF0000; }

[/PHP]

Ich habe Klasse eigentlich für die ganze Tabelle gesetzt Also so:

[PHP]
<table class="table"><tr><td>Inhalt</td></tr></table>

Hat aber nicht funktioniert! Dann habe ich es für nur eine Zeile und für eine Spalte gesetzt! Auch ohne Erfolg!

Was mache ich falsch???

geloescht_JesterDay · 13. Juni 2006

Was mache ich falsch???

Du benutzt den IE.

Flitz · 13. Juni 2006

nicht richtig! ich benutze firefox 1.5

Flitz · 14. Juni 2006

also ich habe es nochmal probiert! Es funktioniert so wirklich nicht!!

Der Hintergrund der Tabelle veränder sich nicht! Für Links geht es aber nicht für Tabellen...

tobias-digital · 14. Juni 2006

also ich habe es nochmal probiert! Es funktioniert so wirklich nicht!!

Nix da! Ausprobieren:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

  <head>

    <title>1466</title>

    <style type="text/css">

    tr:hover {

      background: red;

    }

    </style>

  </head>

  <body>

    <table>

      <tr>

        <td>Lorem</td>

        <td>Ipsum</td>

        <td>dolor</td>

      </tr>

      <tr>

        <td>Lorem</td>

        <td>Ipsum</td>

        <td>dolor</td>

      </tr>

      <tr>

        <td>Lorem</td>

        <td>Ipsum</td>

        <td>dolor</td>

      </tr>

    </table>

  </body>

</html>

Firefox 1.5.0.4

Grüße, Tobias

Flitz · 14. Juni 2006

cool so geht der hover-Effekt schon mal! Danke!

Jetzt hat sich für mich eine weitere Frage ergeben:

Wie muss ich folgende Situation im CSS definieren!

Meine Links werden wenn man mit der Maus drüber geht rot, Links in einer Tabelle jedoch sollen die Schriftfarbe auf weiß wechseln und der Hintergrund auf rot (deswegen der Hovereffekt)

Ich habe jetzt für meine Tabelle einen extra Style "table" angelegt. Dieser sieht wie folgt aus:



/* Formatierung für eine Standardtabelle */

.table		 {font-family: helvetica, arial, geneva, sans-serif; font-size:12; color:#000000;}

a.table:link     {font-family: helvetica, arial, geneva, sans-serif; font-size:12; color: #000000; text-decoration: none;}

a.table:visited  {font-family: helvetica, arial, geneva, sans-serif; font-size:12; color: #000000; text-decoration: none;}

a.table:hover    {font-family: helvetica, arial, geneva, sans-serif; font-size:12; color: #ffffff; text-decoration: none;}

a.table:active   {font-family: helvetica, arial, geneva, sans-serif; font-size:12; color: #DBDBDB; text-decoration: none;}

tr.table:hover   {font-family: helvetica, arial, geneva, sans-serif; font-size:12; color:#ffffff; background-color:#FF0000;}

[/PHP]

Der hover-Effekt für die Tabelle funktioniert! Allerdings bleibt die Schrift meines Links immer Rot wenn ich drüber gehe! Etwas blöd...

tobias-digital · 14. Juni 2006

*vorkau*


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

  <head>

    <title>1466</title>

    <style type="text/css">

    a:hover {

      color: red;

    }

    tr:hover {

      background: red;

    }

    tr a:hover {

      color: white;

    }

    </style>

  </head>

  <body>

    <p><a href="#">Lorem</a></p>

    <table>

      <tr>

        <td><a href="#">Lorem</a></td>

        <td><a href="#">Ipsum</a></td>

        <td><a href="#">dolor</a></td>

      </tr>

      <tr>

        <td><a href="#">Lorem</a></td>

        <td><a href="#">Ipsum</a></td>

        <td><a href="#">dolor</a></td>

      </tr>

      <tr>

        <td><a href="#">Lorem</a></td>

        <td><a href="#">Ipsum</a></td>

        <td><a href="#">dolor</a></td>

      </tr>

    </table>

  </body>

</html>

Flitz · 16. Juni 2006

danke! jetzt funktioniert es! Wusste bisher nicht wie man css für ne Tabelle definiert...

Anmelden

CSS Definition für Änderung der Hintergrundfarbe bei Hover

Empfohlene Beiträge

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte