Hovereffekt in Tabellenzelle

[Andreas]

Hallo,
habe ein Testbeispiel erstellt (vom vB Forum entliehen) und versuche in der Tabellenzeile ein en Hovereffekt zu bekommen, es wird aber nur die Schrift markiert, nicht die ganze Zeile. Was muss ich am CSS ändern?

Gruß Andreas

Hier der Link:
http://www.access-o-mania.de/Ajaxtest.htm

[wahsaga]

hi,

habe ein Testbeispiel erstellt (vom vB Forum entliehen) und versuche in der Tabellenzeile ein en Hovereffekt zu bekommen, es wird aber nur die Schrift markiert, nicht die ganze Zeile. Was muss ich am CSS ändern?

Das ganze wäre sicher leichter nachzuvollziehen, wenn du die Tabelle erst mal nicht dynamisch erstellst, sondern direkt im HTML unterbringst. (Sicher, das lässt sich bestimmt auch so analysieren - aber mir fehlt die Lust dazu.)

gruß,
wahsaga

[Andreas]

Hallo,

Das ganze wäre sicher leichter nachzuvollziehen, wenn du die Tabelle erst mal nicht dynamisch erstellst, sondern direkt im HTML unterbringst. (Sicher, das lässt sich bestimmt auch so analysieren - aber mir fehlt die Lust dazu.)

Ja kann ich verstehen.Die Tabelle wird deswegen dynamisch erstellt, weil ich diesen Code nicht nur auf 1 Dropdown-Box anwenden möchte sondern auf mehrere. Und daher wird die Tabelle in Arrays gehalten.

Hab jetzt auch einen funktionierenden Code gefunden den ich auf der gleichen Seite einsetze: Die Grafik kommt in den a-Tag hinein, das a-Tag bekommt eine separate CSS-Klasse.

Gruß Andreas

[Ingo Turski]

Hi,

td:hover {background:#8A949E}
bzw. für ältere IEs dieses im JS setzen.

freundliche Grüße
Ingo

[Willi]

Hallo,

td:hover {background:#8A949E}
bzw. für ältere IEs dieses im JS setzen.

... oder das A-Element in einen Block mit der Höhe/Breite von 100% "verwandeln"

Grüße,
Willi

[Andreas]

OK, hier meine Lösung:
Cellpadding und Cellspacing der Tabelle auf Null, die Grafik in das <a> hinein ohne Rand, und im <a> die Klasse mainnav eingesetzt.
Funktioniert jetzt wie gewünscht.

Gruß Andreas

a.mainnav  {
 margin : 0px;
 padding : 0px;
 font-size : 11px;
 width : 200px;
 Height: 25px;
 background-color: #ECEAD8;
}
a.mainnav: link {
  padding          : 4px 0px 0px 4px;
  font-size        : 11px;
  width            : 135px;
  background-color : #DFE6EF;
  text-indent      : 11px;
  Display: inline;
}
a.mainnav:link, a.mainnav:visited {
  font-size        : 11px;
  border-top       : 1px solid #ffffff;
  border-bottom    : 1px solid #999999;
  background-color : #F5F5FF;
  font-weight      : normal;
  padding          : 4px 0px 0px 4px;
  color            : #496C9F;
  width            : 250px;
}
a.mainnav:hover {
  background-color : #DFE6EF;
  font-size        : 11px;
  font-weight      : normal;
  text-decoration  : none;
  background-position : 2px;
}