[css] :hover, color wordt overruled

[Verwijderd]

probleemstelling:
Voor het duidelijk maken van een suckerfish menu werk ik op deze site een het menu uit door middel van het :hover element. Het aanpassen van de background-color is geen probleem bij :hover. Het aanpassen van de color geeft echter problemen, deze lijkt te worden overruled door de color, welke staat aangegeven in #menu li a. Probleem is dus in feit dat het hoofdmenu wel de achtergrondkleur groen maakt, maar de frontkleur niet zwart, deze blijft zo wit als sneeuw.

wat heb ik geprobeerd:
Ik heb zitten spelen met de css code en kwam na wat zoek en speurwerk terecht in dit topic: [css] pseudo-classes en cascading. Hierin wordt uitgelegd dat ik in de betreffende lijn !important moet toevoegen om zodoende deze regel niet te laten overrulen. Dat werkt natuurlijk niet... cru gezegd Ik krijg het in ieder geval niet op de juiste manier werkend

relevante code:

code:

#menu li:hover
{
color:#000000 !important;
background-color:#A6DE11;
}

#menu li a
{   
display:block;
color:#FFFFFF;
text-decoration:none;
}

Ik ben ten einde raad... Zoals jullie wellicht op zullen merken is het wel van belang dat die tekst op de een of andere manier zwart wordt, anders wordt de leesbaarheid nihil

[Vae Victis]

je zou de volgorde anders kunnen maken +
als je de kleur in a wilt veranderen moet je ook a selecteren, anders word die overruled door de volgende.

code:

#menu li:hover a
{
color:#000000;
}

[Verwijderd]

helaas, dat haalt niets uit...

[Woudloper]

Je moet het A element als je het mij vraagt geen display: block; geven. Kijk voor het correct opzetten van je Menu bijvoorbeeld eens naar deze uitleg (van Clay)...

[Vae Victis]

Vae Victis schreef op zondag 27 februari 2005 @ 22:40:

code:

#menu li a:hover 
{
color:#000000;
background-color:#A6DE11;
}

Dat zou beter moeten werken

Woudloper schreef op zondag 27 februari 2005 @ 22:53:
Je moet het A element als je het mij vraagt geen display: block; geven. Kijk voor het correct opzetten van je Menu bijvoorbeeld eens naar deze uitleg (van Clay)...

Nadeel is dan dat alleen de text klikbaar is en niet de hele li, wat je eigenlijk wilt in een menu.
En met block kan het wel.

[ Voor 54% gewijzigd door Vae Victis op 27-02-2005 22:55 ]

[Verwijderd]

Probleem is... het is me wel gelukt enkel de tekstkleur naar zwart te laten veranderen...
Indien ik met de pointer dan in het submenu begeef, dan springt ie weer van zwart terug naar wit.

@Woudloper: het is de bedoeling dat de hele li als een soort button moet werken ipv alleen de tekst als een hyperlink

@Vae Victis: helaas ook niet

[Woudloper]

Duidelijk. Je kan dan toch ook nog een a:hover style aanmaken welke er dus voor zorgt dat de text van kleur veranderd?

[Vae Victis]

Verwijderd schreef op zondag 27 februari 2005 @ 23:01:
@Vae Victis: helaas ook niet

Ik had in mijn quote nog wat geedit
Had nl zelf een foutje gemaakt.
Daarmee werkt het hier locaal iig wel.
Wat Woudloper dus ook net zegt.

[ Voor 7% gewijzigd door Vae Victis op 27-02-2005 23:09 ]

[Verwijderd]

Vae Victis schreef op zondag 27 februari 2005 @ 23:08:
[...]

Ik had in mijn quote nog wat geedit
Had nl zelf een foutje gemaakt.
Daarmee werkt het hier locaal iig wel.
Wat Woudloper dus ook net zegt.

, kun je die .css niet even extern hosten dan...ik krijg het niet aan de praat...
...of ik ben gewoon scheel, waarschijnlijk

[Vae Victis]

dit aan de einde van je css zetten:

code:

#menu li a:hover 
{
color:#000000;
background-color:#A6DE11;
}

[Verwijderd]

Vae Victis schreef op zondag 27 februari 2005 @ 23:14:
dit aan de einde van je css zetten:

code:

#menu li a:hover 
{
color:#000000;
background-color:#A6DE11;
}

Ok, bedankt... maar dan loop je dus tegen probleem #2 aan waar ik al eerder aan refereerde. De zwarte tekst veranderd weer naar wit als je met je pointer naar beneden gaat, terwijl de backgroundkleur dus wel gewoon blijft staan. Dat is toch vreemd?

[Woudloper]

Nee dat is niet vreemd omdat je de tekst niet hebt gestyled middels de :hover op de li, maar op de a.

[Verwijderd]

Is het wel mogelijk dan?
Ik bedoel, hoe dien ik de tekst dan te stylen zodat deze ook blijft staan?

[ Voor 62% gewijzigd door Verwijderd op 27-02-2005 23:22 ]

[Woudloper]

Verwijderd schreef op zondag 27 februari 2005 @ 23:21:
Is het wel mogelijk dan?
Ik bedoel, hoe dien ik de tekst dan te stylen zodat deze ook blijft staan?

Niet dat ik weet, zover hetgeen wat ik hier ooit naar heb gezocht en naar het zien van de uitwerkingen van diverse voorbeelden (zoals hierboven gemeld) denk ik dat het gewoon een nadeel is waar je mee moet leren leven...

[Vae Victis]

Niet alleen met css.
Zodra je een element 2 die zich in element 1 bevind gaat hoveren. Hover je element 2 en niet meer element 1.
Onthoud trouwens dat IE standaard geen :hover ondersteund op andere elementen dan a.

[ Voor 16% gewijzigd door Vae Victis op 27-02-2005 23:32 . Reden: a1b2 duidelijk 8)7, nog meer :X ]

[Sappie]

edit:
verkeerd gelezen.. sorry

[ Voor 94% gewijzigd door Sappie op 27-02-2005 23:40 ]

[Clay]

Vae Victis
Zodra je een element 2 die zich in element 1 bevind gaat hoveren. Hover je element 2 en niet meer element 1.

Dat is niet waar je hovert ze dan gewoon alletwee.

Sinisa
Is het wel mogelijk dan?

Volgens mij kan het dus prima ja. De text kan je blijven highlighten met iets als:

Cascading Stylesheet:

li:hover a {
}

De hover op voorgaande li elementen blijft behouden als je dieper gaat hoveren, dus zo kan je de links daarin ook selecteren.

Alleen selecteer je daar natuurlijk ook alle sub links mee. Het liefst zou je dat fixen door een > selector te gebruiken ipv een spatie, maar dat werkt niet zo lekker in IE. (hover ook niet, maar daar zijn meerdere eenvoudige oplossingen voor) Wat je dus kan doen is die specificity gebruiken waar ik het in dat artikel ook over heb:

De waarde van een CSS selector is niet puur afhankelijk van de volgorde waar je ze in definieert, dat is zelfs ondergeschikt aan de waarde van de selector zelf; de volgorde gaat pas meetellen als 2 selectors evenveel waard zijn. Die waarde kan je gewoon berekenen met een simpel optelsommetje; Tel ID's als 100, classes en pseudo-classes als 10, en nodenames als 1.

Cascading Stylesheet:

#menu li a:hover  {} 

is dus 100 + 1 + 1 + 10 = 112. Om li:hover a {} (waarde 12) te overrulen dat diepere links niet gehighlight worden moet je dus een nieuwe rule schrijven die meer waard is en dat overschrijft, bv li:hover li a. Het enige nadeel van deze methode is dat je het voor elk geneste niveau opnieuw moet doen met weer hogere specificities, maar dat is imo een kleine moeite.

[Verwijderd]

wow, dat wist ik helemaal niet...
hoewel dit allemaal nog wel wat vaag klinkt ga ik het even proberen.., anders kom ik hier wel weer slijmen

[Verwijderd]

gelukt!

relevante code voor de knowledge base

code:

#menu li:hover 
{
color:#000000;
background-color:#A6DE11;
}
    
#menu li a
{   
display:block;
color:#FFFFFF;
text-decoration:none;
}

#menu li a:hover 
{
color:#000000;
}

#menu li:hover a
{
color:#000000;
}