• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

CSS Hover nur td einfärben?

Z

zoomzoom

New member
Hallo
ich habe eine Navigation auf der linken seite angebracht. Drüber befinden sich 2 Grafiken.
Die Navigation besteht aus eines Tabelle mit mehreren Zeielen und 2 Spalten.
In der rechten spalte steht der Text link. nun möchte ich das sich der Hintergrund beim Textlink einfärbt.

Ich habe das bereits versucht jedoch färbt er über a:hover ja jeden Link auf der Seite so ein.

wie muss ich das in die Spalte einfügen damit nur die Zelle eingefärbt wird?

Code: 
<td width="23><a href="../nuetzliches.html" target="frame2"><img src="../bilder/punkt.jpg" border="0"></a></td>
 
Mit JS könntest Du es so machen:
Code: 
 <td width="100" onMouseOver="this.style.backgroundColor='#8b0000' ;" onMouseOut="this.style.backgroundColor='Transparent' ;">
 
Mal abgesehen davon, dass du wahrscheinlich die Tabelle nicht brauchst http://www.seybold.jan-andresen.de/, denn ein Menü läßt sich wesentlich besser mit dem HTML element einer Liste umschreiben. Schau dir mal das an: http://css.maxdesign.com.au/listamatic/, kannst du :hover auf jedes Element anwenden:

td:hover{ background-color:#fff}

Das können alle modernen Browser. Der IE zählt nicht dazu. Aber es gibt einen Workaround. wenn du die Links als Blockelement definierst füllen sie die ganze Zelle aus:

a:link{
display:block;
width:100%;
}
:hover{ background-color:#fff}
 
Nebenbei, ein A-Tag mit display:block, sollte nur eine Höhe bekommen.

a:link{
display:block;
height: 18px;
}

Der grund liegt darin, das wenn width benutzt wird, padding-left/right beim IE andere ergebnisse liefert als der rest der Browser.
 
und was muss man bei hover eingeben das sich die normale Schrift-farbe ändert (nicht nur der Hintergrund)
denn mit color bzw font-color funktioniert das nicht...?
 
dkdenz schrieb:
Code: 
a:hover {color:#000;}
Zum Vergrößern anklicken....

genau das funktioniert leider nicht, die Hintergrundfarbe ändert sich, jedoch die Schrift-farbe nicht...zum Beispiel Link entfernt^^
background-color:yellow;color:#000;}</style>[/HTML]
HTML: 
<style type="text/css">:hover{ background-color:yellow;color:#000;}</style>
 
Zuletzt bearbeitet:
Meint ihr sicher die Schriftfarbe?
Ich habe es nun mit 3 Browsern versucht (Internet Explorer, Mozilla Firefox, Opera)
und es änder sich immer blos die Hintergrundfarbe des Links, etwas anderes funktioniert nicht
 
Danke für die Hilfe, ich bin jetzt zwar nicht sicher woran das gelegen hat, aber jetzt funktioniert es.
(zumindest mit dem Internet Explorer^^)
 
Erstmal kommt es auf die korrekte Reihenfolge an:
a:link
a:visited
a:hover
a:active

Dann brauchst Du nur einmal
Code: 
[B]<style type="text/css">[/B]
body { background:#99cccc; }
a:link { text-decoration:none; color:black; font-size:20px; font-family:Times; }
a:visited { text-decoration:none; color:black; font-size:20px; font-family:Times; }
a:hover { background:white; color:steelblue; }
a:active { text-decoration:none; color:black; font-size:20px; font-family:Times; }
[B]</style>[/B]
Außerdem hast Du 2x <body> im Quelltext.
 
So gehts auch im Firefox:
Code: 
<html>
<head>
<style type="text/css">
body { background:#99cccc; }
a:link { text-decoration:none; color:black; font-size:20px; font-family:Times; }
a:visited { text-decoration:none; color:black; font-size:20px; font-family:Times; }
a:hover { background:white; color:steelblue; }
a:active { text-decoration:none; color:black; font-size:20px; font-family:Times; }
</style>
</head>
<body>
<center>
<a href="http://www.kurier.at" target="_blank">Kurier</a><br>
<a href="http://www.diepresse.at" target="_blank">Presse</a><br>
<a href="http://derstandard.at" target="_blank">Standard</a><br>
</center>
</body>
</html>
 
Danke, jetzt geht es sowohl mit IE als auch mit Firefox.
Blos kann ich keinen 2. <body> finden, aber egal
Danke nochmal! :D
 
Gern geschehen... :)

Code: 
<html>

<head>

[B]<body bgcolor="#99CCCC">[/B]

<style type="text/css">
a:hover{background-color:white;color:steelblue;}
</style>

<style type="text/css">
a:link{text-decoration:none;color:black;font-size:20px;font-family:Times;">
</style>

<style type="text/css">
a:visited{text-decoration:none;color:black;font-size:20px;font-family:Times">
</style>


</head>

[B]<body>[/B]
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<center>
<a href="http://www.kurier.at" target="_blank">Kurier</a><br>
<a href="http://www.diepresse.at" target="_blank">Presse</a><br> 

<a href="http://derstandard.at" target="_blank">Standard</a><br>
</center>

</body>

</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben