✔ Border in Tabellenzelle bei Hover ändern

Status
Nicht offen für weitere Antworten.
mammuteffect

mammuteffect

Mitglied
Hi,
ich möchte, dass wenn man über die Tabellenspalte fährt, der Rahmen rechts entfällt und sich die Hintergrundfarbe ändert.
Habe dazu Folgendes geschrieben:

In der css-Datei:

PHP: 
.navi_changeborder {
border-right: 1px solid #000000;
background-color: #D20003;
}

.navi_changeborder:focus {
border-right: 0;
background-color: #FFFFFF;
}
und in der Zelle:

PHP: 
<td class="navi_changeborder">Bla Blupp</td>

Klappt aber nicht. Weder färbt es sich um noch ändert sich der Rahmen. Ist da irgendwo ein Fehler oder geht das mit Tabellenzellen nicht?!

Danke schonmal,

Christoph
 
Hi,

nimm mal die :hover-Pseudoklasse anstelle von :focus. ;)

Für den IE6 wäre eine Prise JS zur Realisierung erforderlich, da er die :hover-Pseudoklasse ausschliesslich für das a-Element unterstützt.
 
ähm, ja ich hatte auch hover genommen. Habe mich nur auf selfhtml mal umgeschaut, aber ursprünglich hatte ich :hover und das ging nicht :/
 
In den modernen Browsern funktioniert das Stylesheet mit :hover beim Überfahren der Tabellenzelle einwandfrei, lediglich der IE6 (und die 5er Baureihe) verweigert es aus dem oben genannten Grund.
 
Hmm, also du kannst gerne gucken:

http://design2punkt0.esv-hagenow.de (effect, 000000)

Links in der Navigation wo News steht, da sollte dann der rechte Rand weggehen und das Feld weiß werden, wird er aber nicht.

Zur Sicherheit nochmal die beiden Auszüge:

PHP: 
<td class="navi_changeborder" style="padding-left: 5px; font-size: 10px; font-family: arial; font-weight: bold;">News</td>

PHP: 
.navi_changeborder {
border-right: 1px solid #000000;
background-color: #D20003;
}

.navi_changeborder:hover {
border-style: none;
background-color: #FFFFFF;
}
 
Zuletzt bearbeitet:
Das ist wirklich mysteriös: auf deiner Seite funktioniert es nicht, wenn ich die relevanten HTML- und CSS-Code-Schnippsel aber in ein Testdokument einfüge, läuft's einwandfrei. :confused:

Im HTML-Code ist mir aufgefallen, dass dem img-Element für die Header-Grafik die schliessende >-Klammer fehlt.
 
Wie es scheint, liegt es einfach an der fehlenden Doctype-Deklaration für das Dokument, dass der Hover-Effekt in den modernen Browsern nicht funktioniert.

Wenn ich beispielsweise

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
oder
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
angebe, wird das Stylesheet problemlos ausgeführt.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück