[CSS] Mouseover op een <tr>?

[Rexomnium]

Met behulp van CSS wil ik de achtergrond van een tablerow van kleur veranderen als je er met je muis overheen gaat. In die betreffende row zitten een stuk of 10 cellen en in 1 cel staat de link. Eigenlijk wil ik ervoor zorgen dat de gehele row als link wordt gezien.

Met behulp van een dergelijk CSS truukje kan ik gemakkelijk afzonderlijke cellen van eigenschappen laten veranderen zodra ik er met mijn muis overheen ga. Dat doe ik met behulp van de volgende code:

Cascading Stylesheet:

#bla td a 
{ 
display: block; 
width: 100%; 
color: black;
background-color: transparent; 
text-decoration: none;  
}

#bla tr a:hover 
{ 
background-color: black; 
display: block; 
color:white; 
height: 100%;
 }

Als ik <td> verander in <tr> werkt deze code helaas niet. Uiteraard kan ik met behulp van een javascript (onmouseover: this.style.background-color='white' oid) dit wel bereiken, maar ik vind dat A: ranzige code en B: IE met SP2 vindt dat niet leuk (krijg steeds een waarschuwing).

Iemand die hier een goede oplossing voor weet die louter met behulp van HTML en CSS te doen is?

[ Voor 3% gewijzigd door Rexomnium op 30-11-2005 22:51 ]

[Verwijderd]

/me had pasgeleden ook zo iets... check mijn topics even op pag1

[Verwijderd]

Javascript is niet ranzig, je moet het alleen met een onload functie toepassen vanuit een aparte js file en niet in de html stoppen. Met css is het geloof ik niet mogelijk om het in alle browsers werkend te krijgen.

[Rexomnium]

Thx, maar in [rml][ HTML] Een hele rij als Hyperlink, mogelijk ?[/rml] wordt er een javascript als oplossing aangedragen en ik vind dat dus niet je-van-het

[Verwijderd]

Ik heb het volgens mij uiteindelijk anders opgelost.... ik zou het moeten nakijken.

[lohost]

Er is een best geinige hack geschreven waarmee dit mogelijk wordt. Deze is te vinden op http://www.xs4all.nl/~peterned/csshover.html

[André]

Misschien staat hier nog wat handigs tussen:

[rml][ CSS] Link en Hover op een <tr>[/rml]
[rml][ CSS/HTML] tr a:hover[/rml]
[rml][ CSS] hoe een complete rij te highlighten ?[/rml]
[rml][ JS] onmouseover change backgroundcolor TR[/rml]
[rml][ JS] OnMouseOver <tr>[/rml]
[rml][ css/js] backgroundColor veranderen via mouseover lukt niet[/rml]

[crisp]

tr:hover werkt gewoon, alleen niet in IE. Als dat een probleem is dan heb je toch een stukje javascript (desnoods in de vorm van een behavior of expression) nodig

[frickY]

Zo te zien wordt op de eerder gegeven pagina - http://www.xs4all.nl/~peterned/csshover.html - omschreven hoe dit dit wel werkend krijgt in IE.

Maar tr:hover is inderdasf gewoon geldigde CSS, en werkt in alle browsers die CSS2 ondersteunen, behalve IE.

Ikzelf vind Javascript totaal geen smerige oplossing, maar ben het met je eens dat het netter zou zijn in CSS. Maar het gebruik van htc-tjes vind ik ranziger dan javascript
Dus gebruik gewoon een

HTML:

<tr onmouseover="this.className = 'active';" onmouseout="this.className = '';">

Rexomnium schreef op woensdag 30 november 2005 @ 22:50:
IE met SP2 vindt dat niet leuk (krijg steeds een waarschuwing).

Die melding krijg je alleen als je de pagina lokaal opent.

[ Voor 23% gewijzigd door frickY op 01-12-2005 09:34 ]

[disjfa]

frickY schreef op donderdag 01 december 2005 @ 09:33:

HTML:

<tr onmouseover="this.className = 'active';" onmouseout="this.className = '';">

Het enige jammere is dat als je het zo op gaat lossen en je hebt een behoorlijke tabel het behoorlijke dataverkeer zal veroorzaken. Dan kan je makkelijker zoals al eerder voorgesteld een klein scriptje maken. Scheelt weer een berg dataverkeer.

[Rexomnium]

Dames en heren bedankt ik ga het toch maar oplossen met Javascript. Is dat trouwens nou DHTML, of is dat wéér wat anders?

* Rexomnium prays dat IE7 dat wél gaat ondersteunen

[ Voor 20% gewijzigd door Rexomnium op 01-12-2005 13:27 ]

[frickY]

DHTML staat voor Dynamic HTML, en staat voor de combinatie van HTML met Javascript en/of CSS.
Dus ja, dit soort dingen vallen onder de noemer DHTML.

@disjfa
True. Als het een pagina is welke veel requests krijgt kun je beter een scriptje schrijven die de events op de rows zet.

[Yoozer]

Rexomnium schreef op donderdag 01 december 2005 @ 13:26:
Dames en heren bedankt ik ga het toch maar oplossen met Javascript.

Om er voor te zorgen dat je niet gruwelijk veel "onmouseover" en "onmouseout" er tussen hebt staan per TR zoals disjfa en frickY zeggen kun je misschien het beste even kijken naar unobtrusive JS.

* Rexomnium prays dat IE7 dat wél gaat ondersteunen

En dan zit nog steeds compleet Windows 2000, Windows 98 en Windows 95-gebruikend volk zonder die mogelijkheden.

[ Voor 6% gewijzigd door Yoozer op 01-12-2005 15:24 ]