Toon posts:

[CSS] Achtergrond EN tekstkleur veranderen van een <tr>

Pagina: 1
Acties:
  • 246 views sinds 30-01-2008
  • Reageer

Verwijderd

Topicstarter
Beste Tweakers.

Middels CSS wil ik de hele achtergrondkleur en tekstkleur van een <tr> veranderen als je er boven 'hovered'.

Achtergrondkleur is simpel. Middels het vaker op tweakers.net genoemde: http://www.xs4all.nl/~peterned/ creer ik een eenvoudige:

Cascading Stylesheet:
1
2
3
4
5
6
7
8
html, body{
    behavior:url("csshover.htc");
}

table.search tr:hover{
    background-color:#666666;
    color:White;    
}


Dit werkt, maar zodra je hier een link toevoegd, dan overschrijft hij de color settings van de <tr> (resulterend in een zwart blijvende link kleur ipv wit.

Cascading Stylesheet:
1
2
3
4
5
6
table.search a
{
    text-decoration:none;
    color:Black;
    display:block;
}

Een :hover voor de <a> toevoegen zou weer helpen, maar dan kleurt slechts 1 cel en niet de hele rij.
Cascading Stylesheet:
1
2
3
4
table.search a:hover
{
    color:White;
}


Is er een manier om de eigenschappen van de <a> over te nemen van de onderliggende <tr> zodat de gehele rij zowel van achtergrond als voorgrond kleur veranderd?

Verwijderd

code:
1
2
3
tr:hover {
    backgroundcolor: #CODE; color: #CODE;
}

Werkt overgens niet in IE6, en ook niet in IE7! (mijn grote terleurstelling van IE7)

Ik ben bang dat je met javascript aan de gang moet gaan, tenzij iemand weet hoe het met CSS kan (ben ik dan ook benieuwd naar :))

Edit: Ik lees niet goed, dit heb je al. 8)7
Ik denk wederom dat je met JS aan de haak moet :(

[ Voor 15% gewijzigd door Verwijderd op 10-12-2006 20:10 ]


  • Zoefff
  • Registratie: September 2001
  • Laatst online: 16:32

Zoefff

❤ 

Cascading Stylesheet:
1
2
3
table.search tr:hover a {
    color: white;
}

[ Voor 25% gewijzigd door Zoefff op 10-12-2006 20:13 ]


FotoblogWerkaandemuur.nlMoestuincursus.nlTwitter


Verwijderd

Topicstarter
Zoefff schreef op zondag 10 december 2006 @ 20:12:
Cascading Stylesheet:
1
2
3
table.search tr:hover a {
    color: white;
}
Soms is de oplossing zo simpel.
Thx!
Werkt overgens niet in IE6, en ook niet in IE7! (mijn grote terleurstelling van IE7)
P.s. Mijn ervaring is dat dit juist wel werkt in IE7, maar niet in IE6.
Lees voor de oplossing voor dit probleem (zoals ik ook had beschreven) http://naarvoren.nl/artikel/hover/

[ Voor 41% gewijzigd door Verwijderd op 10-12-2006 23:27 ]