Zum Inhalt springen

CSS Definition für Änderung der Hintergrundfarbe bei Hover

Flitz

Von Flitz
in Webdesign

 Teilen

Empfohlene Beiträge

Flitz

Flitz

Geschrieben
Geschrieben

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

CyberDemon

Geschrieben
Geschrieben
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

geloescht_JesterDay

Geschrieben
Geschrieben

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

Flitz

Geschrieben
  • Autor
Geschrieben

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???

Flitz

Flitz

Geschrieben
  • Autor
Geschrieben

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

tobias-digital

Geschrieben
Geschrieben
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

Flitz

Geschrieben
  • Autor
Geschrieben

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

tobias-digital

Geschrieben
Geschrieben

*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>

Erstelle ein Benutzerkonto oder melde Dich an, um zu kommentieren

Du musst ein Benutzerkonto haben, um einen Kommentar verfassen zu können

Benutzerkonto erstellen

Neues Benutzerkonto für unsere Community erstellen. Es ist einfach!

Neues Benutzerkonto erstellen

Anmelden

Du hast bereits ein Benutzerkonto? Melde Dich hier an.

Jetzt anmelden
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...