[JS, HTML en CSS] Onmouseover li tags

[JefSnare]

Beste Tweakers,

Ik heb een probleem waar ik niet uitkom...het komt erop neer dat wanneer de gebruiker over een list heen gaat dat de link en de li color een andere kleur worden.

HTML:

<ul>
    <li onmouseover="this.className = 'mouseover'" onmouseout="this.className = 'normal'"><a href="index.html">home</a></li>
</ul>

Cascading Stylesheet:

.mouseover{
    color: #FF8C00;
    }
    
.normal{
    color: #808080;
    }

Dit werkt wel, alleen nu kleurt de link niet mee bij een mouseover als je ergens anders dan de link "muist". Dus wanneer ik erover heen ga kleurt de li mee echter de link niet. Deze kleurt uiteraard wel gewoon als je op de link gaat staan

Ik heb geprobeerd om een div/span tag eromheen te zetten, alleen W3C vindt dit geen geweldige optie...Hoe zou ik dit kunnen aanpakken? Ik heb op errors gecontroleerd, andere opties als DIV en SPAN en gekeken naar een optie zonder list alleen dan wordt het veel meer werk...

Overigens is *hier een voorbeeld te bekijken.

alvast bedankt

OPLOSSING

Cascading Stylesheet:

li:hover > a:link, li:hover{
    color: #FF8C00;
    }

Bovenstaande code werkte alleen in FF, Chrome en Opera, dus voor IE onderstaande regel (bevat functies die het wel laten werken );

Cascading Stylesheet:

<!--[if IE]>
behavior: url("hover.htc");
<![endif]-->

[ Voor 12% gewijzigd door JefSnare op 11-11-2009 18:04 ]

[BtM909]

Waarom werk je niet met een :hover direct op de li (dus alleen CSS)?

[JefSnare]

BtM909 schreef op woensdag 11 november 2009 @ 14:36:
Waarom werk je niet met een :hover direct op de li (dus alleen CSS)?

Dat krijg ik wel aan de gang, echter dan doet ie het alleen met beide, als ik de js weghaal werkt er niets meer

EDIT: Het werkt, alleen de "dots" kleuren niet meer nu, is dat ook op te lossen met css, want de color is namelijk wel al ingesteld, de link kleurt mee alleen de dots niet.

EDIT 2.0:

Cascading Stylesheet:

li:hover a:link{
    color: #FF8C00;
    }

Werkt, alleen werken de bullets niet mee

[ Voor 34% gewijzigd door JefSnare op 11-11-2009 14:46 ]

[XiniX88]

li zit niet in IE6 sowieso (de hover state), ik weet helaas niet in welke versie die wel is toegevoegd, hier had ik wel rekening mee gehouden. Er is een .htc bestand die dacht ik de :hover state toevoegd aan li, maar dat zou je moeten zoeken.

[JefSnare]

XiniX88 schreef op woensdag 11 november 2009 @ 14:46:
li zit niet in IE6 sowieso (de hover state), ik weet helaas niet in welke versie die wel is toegevoegd, hier had ik wel rekening mee gehouden. Er is een .htc bestand die dacht ik de :hover state toevoegd aan li, maar dat zou je moeten zoeken.

Voor IE6 is een aparte CSS in de maak, zodat deze gebruikers een melding krijgen bij het gebruik en de CSS volledig werkt in IE6

[Standeman]

Als je de dots ook mee wil kleuren kan je volgens mij zo doen:

HTML:

<a href="index.html">
  <li onmouseover="this.className = 'mouseover'" onmouseout="this.className = 'normal'">home</li>
</a>

[XiniX88]

JefSnare schreef op woensdag 11 november 2009 @ 14:48:
[...]


Voor IE6 is een aparte CSS in de maak, zodat deze gebruikers een melding krijgen bij het gebruik en de CSS volledig werkt in IE6

Wat ik wil zeggen is dat li:hover wel kan werken in internet explorer maar je een script toe moet voegen, namelijk:
http://www.xs4all.nl/~peterned/csshover.html

IE7 kent volgens deze website hetzelfde probleem bijvoorbeeld, waardoor je wel leuk li:hover hebt gebruikt maar het alsnog niet werkt...

En voor je andere probleem

GOOGLE: http://www.google.nl/#hl=...color&fp=46d08ae2e4da88db

succes

[JefSnare]

Heel erg bedankt, met jullie tips kom ik er echt wel uit. Heb alweer te veel cadeau gekregen

SOLVED

[Standeman]

JefSnare schreef op woensdag 11 november 2009 @ 15:07:
Heel erg bedankt, met jullie tips kom ik er echt wel uit. Heb alweer te veel cadeau gekregen

SOLVED

En wat is nou de oplossing geweest? Misschien wel handig om te posten

[JefSnare]

Standeman schreef op woensdag 11 november 2009 @ 15:39:
[...]

En wat is nou de oplossing geweest? Misschien wel handig om te posten

Is toegevoegd aan topicstart

[SgtCaffran]

Wat ik vaak voor menu's doe is van de <a> een block element maken ter grootte van de <li>. Dan kan je a direct de hover geven en dus de tekstkleur/achtergrondkleur/afbeelding/etc veranderen bij een :hover.

Werkt overigens in alle browsers.

[ Voor 8% gewijzigd door SgtCaffran op 12-11-2009 10:54 ]

[MoietyMe]

Waarom niet gewoon:

Cascading Stylesheet:

li a {
display:block;
}

li a:hover {
color:#ff8c00;
}

Doet het zelfde, maar is veel makkelijker.

[SgtCaffran]

Wat ik al zei dus...

[JefSnare]

Er zijn meer "acties" die moeten gebeuren bij een mouseover, in principe is de code van Good Fella makkelijker alleen heb ik in de website meer van dat soort dingen en heb uiteindelijk besloten om maar een behavior aan te maken zodat FF gebruikers niet IE fouten krijgen, en andersom...