Rollover auf Table mit CSS

[oliver weibel]

Hallo zusammen

Ich versuche auf einer Tabelle mit CSS die Hintergrundfarbe zu wechseln, das geht auch, jedoch hat der IE ein Problem damit und zeigt da nichts an.

Konkret:
Ich ahb eine Liste, also eine normale Tabelle. Wenn ich nun mit der Maus auf die ganze Linie gehe, dann soll die Hintergrundfarbe der ganzen Liste sich ändern. Das hab ich wie folgt gemacht:

<table width="631" border="0" cellpadding="0" cellspacing="0" ellspacing="0">
      <tr>
       <td class="tabelleborder">
        <table>
         <a href="#"><tr>
          <td width="154"><input type="checkbox" name="checkbox" value="checkbox" /></td>
          <td width="154"><font class="fontbold">Oskar M&uuml;ller</font></td>
          <td width="154">[e-mail]</td>
          <td width="154">[phone]</td>
         </tr></a>
        </table>
       </td>
      </tr>
     </table>

und das CSS schaut wie folgt aus:

.tabelleborder {
border-left: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
}

.tabelle a {
text-decoration: none;
background-color: #ffffff;
}

.tabelle a:hover {
text-decoration: none;
background-color: #ecf0f5;

}

Geht das überhaupt mit dem IE? Oder muss ich da JavaScript brauchen?

Danke für Eure Hilfe.

gruss
Oliver

[Maz]

Moinsen,

der IE kann nur auf Links hovern, nicht auf andere Elemente.

Aber ein <tr> in ein <a> zu packen ist geradezu lebensgefährlich (ich benutze Mal Kalle-Rummenigge-deutsch "eine lebensgefährliche Flanke") ;-)

Das ist nicht valide, sematisch widersinnig und sowieso eine Fehlerquelle für die Darstellung.

[oliver weibel]

au mennoooo ...
dachte ich es mir doch ;-)

[Gernot Back]

Hallo oliver,

au mennoooo ...
dachte ich es mir doch ;-)

Aber das JS, das du dazu im IE ersatzweise brauchst, ist doch sehr überschaubar:

  
<table cellspacing="0" cellpadding="0">  
<tr onMouseOver="[code lang=javascript]style.backgroundColor='#00ff00'
~~~" onMouseOut="`style.backgroundColor=''`{:.language-javascript}">  
 <td>&nbsp;</td>  
 <td>&nbsp;</td>  
</tr>  
<tr onMouseOver="`style.backgroundColor='#00ff00'`{:.language-javascript}" onMouseOut="`style.backgroundColor=''`{:.language-javascript}">  
 <td>&nbsp;</td>  
 <td>&nbsp;</td>  
</tr>  
</table>  
[/code]  
Für Opera 7.54 scheint es bei diesem Ansatz erforderlich zu sein, dass die Tabellenzellen oben ausgerichtet sind. Mit der zusätzlich definierten Pseudoklasse tr:hover funktioniert es in modernen Browsern dann auch bei ausgeschalteten JS.  
  
Gruß Gernot

[Ashura]

Hallo Gernot.

<table cellspacing="0" cellpadding="0">
<tr onMouseOver="[code lang=javascript]style.backgroundColor='#00ff00'

> [...]  
> [/code]  
  
Nanu? Ist `this`{:.language-javascript} hier etwa nicht nötig?  
  
  
Gruß, Ashura

-- 
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|  
[30 Days to becoming an Opera8 Lover](http://tntluoma.com/opera/lover/8/) -- [Day 19: Notes](http://operalover.tntluoma.com/8/day_19_notes)  
Meine Browser: Opera 8.01 | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0  
[\[Deshalb frei! - Argumente pro freie Software\]](http://deshalbfrei.org/)

[Gernot Back]

Hallo Ashura,

Nanu? Ist this hier etwa nicht nötig?

Nein, komischerweise nicht, ist aber auch nicht schädlich. Ich wollte es halt möglichst überschaubar halten.

Normalerweise würde ich bei vielen derartigen Tabellen-Hover-Zeilen aber mit
zwei Funktionen rein(this) und raus(this) arbeiten.
Da wird es trotz dann erforderlichem Übergabeparameter noch kürzer.

Gruß Gernot

[Ashura]

Hallo Gernot.

Nanu? Ist this hier etwa nicht nötig?

Nein, komischerweise nicht, ist aber auch nicht schädlich. Ich wollte es halt möglichst überschaubar halten.

Tatsache. Eben ausprobiert:

<a href="http://example.org" onclick="[code lang=javascript]alert(href);">Klick mich</a>[/code]

Warum wird das nicht häufiger verwendet? Da muss doch noch mehr dahinterstecken. (Aber schon rein von der Sinnhaftigkeit werde ich dennoch weiterhin this verwenden.)

Gruß, Ashura

[oliver weibel]

Das hab ich jetzt gerade eingesetzt und funktioniert super.
Wollte eben ohne JS aus kommen, aber so ist auch perfekt.

Danke Euch.