[CSS]Hoveren over een table row werkt niet

[Verwijderd]

Hallo allemaal,

Ik probeer nu al m'n gerotzooide html om te zetten naar CSS en dat lukt tot zover goed op 1 ding na, het hoveren over een tabel werkt niet. De standaard opmaak werkt wel dus die is goed maar de zodra ik met m'n muis over een table row ga verkleurt deze helaas niet. Ik roep hem op via

code:

<tr class="overzicht">

De code:

code:

/* De standaard waarden van de gegevens in de overzicht tabel */

.overzicht
{
    background-color: #FFFFFF;
    font-family: verdana;
    font-size: 10pt;
    text-align: left;
    color: #800000;
}


/* Dit gebeurt er als er met de muis over de tabel wordt bewogen */

.overzicht:hover
{
    background-color: #FFF2EC;
    font-family: verdana;
    font-size: 10pt;
    text-align: left;
    color: #800000;
}

Ik heb ook al geprobeerd in elke <td> een klasse bij te voegen maar dit mocht ook niet baten.

Ook op google goed gezocht, maar geeft ook geen goede antwoorden op wat ik probeer. Ik zou er het liefst namelijk geen javascript in willen gebruiken. Ik heb gelezen dat dit mogelijk is op diverse sites, alleen werkt het niet in zowel FF als IE.

Iemand hier een oplossing voor?

[ Voor 4% gewijzigd door Verwijderd op 24-03-2006 12:16 ]

[giMoz]

een tr heeft geen hover, heel simpel.

probeer een <A>

[BasieP]

giMoz schreef op vrijdag 24 maart 2006 @ 12:19:
een tr heeft geen hover, heel simpel.

probeer een <A>

tr heeft wel een hover, alleen in IE werkt ie niet, omdat IE gewoon niet klopt

@TS: test het eens in FF of Opera, of safari, of een willekeurige w3c complient browser.. en je zal zien dat ie het dan wel doet

mocht je het wel willen voor IE , moet je idd JS gebruiken

word dan zoiets:

HTML:

<table>
  <tr onmouseover="m_over()" onmouseout="m_out()">
    <td>blaat</td>
  </tr>
</table>

Java:

function m_over() {
  this.className+=" over";
}

function m_out() {
  this.className=this.className.replace(" over", "");
}

Cascading Stylesheet:

.overzicht
{
    background-color: #FFFFFF;
    font-family: verdana;
    font-size: 10pt;
    text-align: left;
    color: #800000;
}

.over
{
    background-color: #FFF2EC;
}

[ Voor 67% gewijzigd door BasieP op 24-03-2006 12:30 ]

[Zoefff]

giMoz schreef op vrijdag 24 maart 2006 @ 12:19:
een tr heeft geen hover, heel simpel.

probeer een <A>

Een tr heeft wél een hover hoor, heel simpel

Het werkt alleen niet in IE(6), daar worden hovers alleen ondersteund op het a-element. Valt met wat javascript wel op te lossen

[ Voor 3% gewijzigd door Zoefff op 24-03-2006 12:26 . Reden: Het is gevaarlijk om modjes teveel rechten te geven O-) ]

[JHS]

giMoz: Volgens de spec heeft wel degelijk elk element een :hover state, alleen heeft IE dat niet geïmplementeerd .

olger1024: Je hoeft alleen de veranderde elementen op te geven bij de :hover class . Probeer eens met een wat groter kleurverschil tussen de normale en de hover state (#fff en #f00 bijvoorbeeld), misschien is het te subtiel om zichtbaar te zijn (op jouw monitor)? Het zou in FireFox volgens mij namelijk gewoon moeten werken, alleen heb je voor IE dan wel een behaviour (htc) nodig, of moet je het toch anders zien op te lossen .

[Verwijderd]

EDIT: OH er zijn meer reacties dan toch graag proberen op te lossen zonder JS

Maakt al niet meer uit opgelost met het minimum aan javascript:

onmouseover="this.className='overzicht-hover'" onmouseout="this.className='overzicht'

en de 2e overzicht:hover gewoon overzicht-hover genoemd

[ Voor 25% gewijzigd door Verwijderd op 24-03-2006 12:27 ]

[Verwijderd]

Ok het werkt. het enige probleem is, dat de achtergrond niet verkleurd maar de tekst

[ZeilDude]

Ik vind het overigens niet eens zo'n hele gekke keuze van MS om de pseudoklasse ":hover" alleen op links van toepassing te laten zijn. Immers, een hover wekt (bij mij) altijd de interesse dat het om een link gaat. Anders probeer je op iets te klikken waarop je helemaal niet kunt klikken. Vergelijk het maar een beetje met onderstrepen, dat suggereert ook een link. Onderstrepen gebruik je dus NIET om iets nadruk te geven.

[sjaakaq]

ZeilDude schreef op vrijdag 24 maart 2006 @ 12:34:
Ik vind het overigens niet eens zo'n hele gekke keuze van MS om de pseudoklasse ":hover" alleen op links van toepassing te laten zijn. Immers, een hover wekt (bij mij) altijd de interesse dat het om een link gaat. Anders probeer je op iets te klikken waarop je helemaal niet kunt klikken. Vergelijk het maar een beetje met onderstrepen, dat suggereert ook een link. Onderstrepen gebruik je dus NIET om iets nadruk te geven.

Tja...wat dacht je van een tabelrij zodat die eruitsprint t.o.v. de andere rijen? Of een hidden irj die alleen zichtbaar wordt als je ergens over hovert (dit dus).

[RM-rf]

JHS schreef op vrijdag 24 maart 2006 @ 12:25:
giMoz: Volgens de spec heeft wel degelijk elk element een :hover state, alleen heeft IE dat niet geïmplementeerd .

Ik kwam er onlangs achter dat elementen met display: table-row en table-cel ook in firefox geen events als 'onclick', onmouseover en onmouseout afvangen in Firefox.... (waar ik deze had toegewezen met -moz-behaviour, iets wat voorheen wel prima gefunctioneerd had bij de 1.0 Firefox)...

het kan dus zeer goed zijn dat het correct is dat elementen die geen display block, inline-block, inline oid hebben, geen :hover kennen.
het voorkomt verder dat mensen die eigenlijk puur visuele doelen hebben, toch een tabel gebruiken voor positionering en ontlast het geheugengebruik van een gerenderde pagina verder als de exacte positionering van tabulaire data niet telkens exact bijgehouden moet worden: het renderen van een table wordt een stuk makkelijker en sneller.

[ Voor 21% gewijzigd door RM-rf op 24-03-2006 13:01 ]

[JHS]

RM-rf: Zie http://www.w3.org/TR/CSS2...ml#dynamic-pseudo-classes . Alhoewel het daar niet helemaal duidelijk staat, blijkt denk ik uit het feit dat er overal gewoon "element" staat, en verder niks over het type element, dat het de bedoeling is dat het op álle elementen van toepassing is .

[Gummie]

Met onderstaande code krijgt de rij wel een andere kleur bij mij. Werkt in FF en IE6.
T'is wel iets minder netjes dan dat je wilt hebben. Maar anders krijg ik het bij mij ook niet werkend.

code:

<TR BGCOLOR="#FFFFF0" onMouseOver="this.bgColor='#DDE5EE';" onMouseOut="this.bgColor='#FFFFF0';">

[BasieP]

Gummie schreef op vrijdag 24 maart 2006 @ 16:33:
Met onderstaande code krijgt de rij wel een andere kleur bij mij. Werkt in FF en IE6.
T'is wel iets minder netjes dan dat je wilt hebben. Maar anders krijg ik het bij mij ook niet werkend.

code:

<TR BGCOLOR="#FFFFF0" onMouseOver="this.bgColor='#DDE5EE';" onMouseOut="this.bgColor='#FFFFF0';">

probeer de code die ik gepost heb, daarin kan je een 'hover' faken in IE

wat je nu doet is gewoon dmv JS de bgcolor veranderen.. op het moment dat je meer wilt dan dat, krijg je mega veel ranzige code

je hebt zowel JS als css in je html staan, waar het ook gewoon gescheiden kan