✔ hover-Eigenschaft auf Tabelle anwenden

[fanste]

Hallo,
Ich hab da ne kleine Frage.
Gibt es eine Möglichkeit die hover-Eigenschaft auch auf Tabellen (td) anzuwenden, ohne dass ein Link in dieser Spalte vorhanden ist?
Ich will auch kein JS verwenden.
So funktioniert es leider nicht:

CSS-Datei:

.pfeil
{
	background:url('red_pfeil.jpg');
	background-position:center;
	background-repeat:no-repeat;
}
.pfeil td:hover
{
	background:url('green_pfeil.jpg');
	background-position:center;
	background-repeat:no-repeat;
}

HTML:

<table width="250">
  <tr>
    <td width="48" class="pfeil">&nbsp;</td>
    <td width="199">&nbsp;</td>
  </tr>
  <tr>
    <td width="48" class="pfeil">&nbsp;</td>
    <td width="199">&nbsp;</td>
  </tr>
</table>

Danke schonmal im voraus.

mb fanste

 

[versuch13]

Hi, nur mit CSS ist es nicht machbar, weil der IE nicht mit spielt.


Gruß

 

[fanste]

Also bleibt mir nur JS?

 

[Gottox]

Was?!
Natürlich ist es in CSS möglich. CSS wird nicht von Microsoft gemacht. Es ist ein Standart des W3C und so gut wie alle Browser unterstützen ihn, nur eben nicht der IE.

Du hattest in deinem CSS einen Fehler;

.pfeil
{
	background:url('red_pfeil.jpg');
	background-position:center;
	background-repeat:no-repeat;
}
td.pfeil:hover
{
	background:url('green_pfeil.jpg');
	background-position:center;
	background-repeat:no-repeat;
}

<table width="250">
  <tr>
    <td width="48" class="pfeil">&nbsp;</td>
    <td width="199">&nbsp;</td>
  </tr>
  <tr>
    <td width="48" class="pfeil">&nbsp;</td>
    <td width="199">&nbsp;</td>
  </tr>
</table>

Um das ganze für den IE verarbeitbar zu machen, schlage ich folgendes vor:

.pfeil
{
	background:url('red_pfeil.jpg');
	background-position:center;
	background-repeat:no-repeat;
}
td.pfeil:hover ,td.pfeil_hover
{
	background:url('green_pfeil.jpg');
	background-position:center;
	background-repeat:no-repeat;
}

<table width="250">
  <tr>
    <td width="48" class="pfeil" onmouseover="this.className='pfeil_hover'" onmouseout="this.className='pfeil'">&nbsp;</td>
    <td width="199">&nbsp;</td>
  </tr>
  <tr>
    <td width="48" class="pfeil" onmouseover="this.className='pfeil_hover'" onmouseout="this.className='pfeil'">&nbsp;</td>
    <td width="199">&nbsp;</td>
  </tr>
</table>

 

[Gumbo]

Falls es sich bei der Tabelle um ein Navigationsmenü oder einer ähnlichen Liste handelt, solltest du auch ein für Listen gedachtes Element (siehe Listen in HTML-Dokumenten) verwenden und diese entsprechend formatieren.

Siehe dazu auch Listamatics 1 und Listamatic 2.

 

[versuch13]

Was?!
Natürlich ist es in CSS möglich. CSS wird nicht von Microsoft gemacht. Es ist ein Standart des W3C und so gut wie alle Browser unterstützen ihn, nur eben nicht der IE.


Um das ganze für den IE verarbeitbar zu machen, schlage ich folgendes vor:

   <tr>
     <td width="48" class="pfeil" onmouseover="this.className='pfeil_hover'" onmouseout="this.className='pfeil'"> 
     <td width="199"> 
   </tr>

Er sagte ja eindeutlich, er möchte kein JavaScript benutzen, auch nicht für den IE. Der OnMouseOver Befehl für die Tabellenzelle? Also...


Gruß

 

[fanste]

Ich werde das genannte Beispiel nachher mal ausprobieren. Wenn nur der IE JS dafür benötigt, dann bekommt er es halt. Bei den anderen lasse ich es weg. (Geht wunderbar via PHP ).
Also, danke an alle die geholfen haben. Bei problemen melde ich mich nochmal.