Zelle färben bei hover - aber wie? - javarea.de Forum powered by javarea.de

Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > Zelle färben bei hover - aber wie?

Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > Zelle färben bei hover - aber wie?

Pages: [1] 2 ... nächste » ... Letzte »

geschrieben von Cluster am 28.05.2004 - 07:54

Hallöchen @All!

Ich weiß es leider nicht mehr genau wie das ging, und in der Forumssuche hab' mich wahrscheinlich auch blöd angestellt, aber wie bekomme ich das hin, das bei einem Hover über einen Link sich die Tabellenzelle färbt?

Bisher habe ich bei einem Hover folgendes:

a:hover {
font-family:Verdana,Arial,Times;
font-size: 12px;
font-weight: bold;
color:#000000;}

Dabei verändert sich aber nur der Text des Links. Wie bekomme ich das hin, dass sich auch die Tabellenzelle färbt?

geschrieben von Armin am 28.05.2004 - 08:21

moin,

eine Möglichkeit :

	HTML-Quelltext
1: 2:	display: block; background-color: #B3C0DD;

noch einfügen.

Armin

geschrieben von Cluster am 28.05.2004 - 08:38

Moin Armin!

Gute Idee, Danke. Aber damit füllt er leider nicht die komplette Zelle aus.

Ich hätte gern, dass die komplette Zelle sich dann färbt.

geschrieben von Armin am 28.05.2004 - 09:33

Hi,

dann per JS in den tr-tag dann onMouseOver="this.bgColor='ff9900'" oder Du schreibst Dir ne Function.

Armin

geschrieben von Cluster am 28.05.2004 - 09:37

Also geht das direkt mit CSS nicht?!

Ich dachte, da wäre so was möglich wie z.B. td:hover oder td.a:hover oder so.

Schade. So muss ich sämtliche Seiten und Links anfassen. Über CSS wäre es natürlich einfacher gewesen oder ich mache es halt doch mit Deinem ersten Vorschlag.

Trotzdem Danke!

geschrieben von Olli am 05.06.2004 - 17:14

Hi,

das geht schon mit CSS, aber nicht im Internet Explorer, der Mozilla, Opera, Konqueror und alle anderen Browser mit CSS 2.0 unterstützung können das... Geht ganz einfach:

tr
{
background: white;
}

tr:hover
{
background: black;
}

Der IE kann es aber wie gesagt nicht... Hier ein Beispiel.

Olli

geschrieben von sephir0th am 05.06.2004 - 19:02

Junx, was macht ihr euch dat so schwer?

Hier dat wat mit allem funzt:

pack einfach alles das rot ist mit in den TD Tag!

Funzt auf IE, Mozilla und Opera:

<td bgcolor="#FFFFFF" OnMouseOver="style.backgroundColor='#FF0000';" OnMouseOut="style.backgroundColor='#FFFFFF';"></td>

bei onMouseOut muss natürlich die selbe farbe dann sein wie bei bgcolor im td tag, da der dir sonst ne andere farbe danach gibt als die Zelle ursprünglich angezeigt hat!

hf damit!

geschrieben von Pablo am 05.06.2004 - 19:06

Wenn du willst, dass sich beim berühren des Links die bg-Farbe ändert, geht das nicht mit CSS. Wenn beim Überfahren der Zelle etwas geschehen soll, geht das sehr wohl. nur dann halt mit td:hover.

Guckst du hier:
http://www.javarea.de/forum/showthr....ge=1#48227
Nur wird da das Hintergrund-Bild geändert. Aber da kannst du auch einfach eine Farbe für einsetzen.

Pablo

geschrieben von Olli am 05.06.2004 - 21:30

sephir0th: Niemand macht sich hier etwas schwer... Wenn JavaScript für zum erreichen eines Ziels vermieden werden kann, dann vermeide es. Um der W3C recommedation zu folgen: onmouseover, onmouseout, also KLEIN geschrieben.

Pablo: Das ist doch genau das gleiche, was ich oben gepostet habe.

Olli

geschrieben von Armin am 05.06.2004 - 22:00

	Zitat
	Um der W3C recommedation zu folgen: onmouseover, onmouseout, also KLEIN geschrieben.

Erst ab XHTML. Bei HTML ist das egal und wird nicht als Fehler ausgegeben.

Armin

geschrieben von Olli am 05.06.2004 - 22:17

@Armin: Okay, da hast du recht, aber warum erst angewöhnen? ;) Früher oder später werden viele XHTML schreiben, einfach wegen der kompatibilität... da bin ich mir fast sicher.

Olli

geschrieben von sephir0th am 06.06.2004 - 12:15

@ Olli:

Ja nee is klar......entschuldigung das ich was gesagt habe, ich werd mich am besten zu keinem Thema mehr äussern! Dann haste nichts worüber du in meinen Beiträgen meckern kannst!

Schliesslich wollte ich ihm nur beim Problem helfen!

geschrieben von Olli am 07.06.2004 - 16:13

@sephir0th: Hey so war das nicht gemeint.

Meine äußerung bezog sich halt nur auf das " Junx, was macht ihr euch dat so schwer?" - denn mit CSS ist es viel einfacher, weil zentral definierbar.

Um es zu verdeutlichen: Das onmouseover="..." und onmouseout="..." muss bei jeder zeile bzw. zelle stehen (ja nach anwendungsfall). Sprich, wenn sich die farbe mal ändern soll, muss es an sehr vielen stellen modifiziert werden. Wenn du ein zentrales CSS definierst, wie oben schon angesprochen, dann hat man es an einer stelle definiert und kann es ganz leicht abändern, wenn einem die hover farbe nicht mehr gefällt. Die zentrale definition spart außerdem platz und macht den quellcode kleiner.

Wenn das ganze für einen anklickbaren Link sein soll, kann ich auch folgendes empfehlen:

<div id="links">
<a href="link1.html">Link #1</a>
<a href="link2.html">Link #2</a>
<a href="link3.html">Link #3</a>
</div>

Style-Sheet:

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19:

div#links
{
  width: 200px;
}

div#links a
{
  display: block;
  border: black 1px solid;
  background: #cccccc;
  color: black;
  margin: 2px 0px;
}

div#links a:hover
{
  border: #555555 1px solid;
  background: #ffffff;
}

Olli

geschrieben von sephir0th am 07.06.2004 - 18:58

Hast ja Recht! ;)

Mein Vorschlag war ja auch nur aus dem Grund weils auch auf Mozilla und Co läuft.......

geschrieben von Shaddow am 16.06.2004 - 17:12

also ich mache jetzt grade sephirs metode, weil ich will, dass es auch im ie läuft, aber irgendwie funzt das net:

	HTML-Quelltext
1:	<td style='background:888888' OnMouseOver='style.backgroundColor='#FF0000';' OnMouseOut='style.backgroundColor='#FFFFFF';'>

HTML-Quelltext

Zitat

HTML-Quelltext

HTML-Quelltext