CSS hover en active

Status
Niet open voor verdere reacties.
S

simon911

Gebruiker
Lid geworden
18 feb 2012
Berichten
61
Hallo allemaal,

Ik wil graag een andere :hover als de <a></a> :active zijn.

Hoe doe ik dit? :confused:
 
Mischien ligt het aan mij maar ik heb geen idee wat je bedoelt.
 
Ik bedoel dat als ik 2 linkjes heb (<a href=''></a>) en de ene is active (a:active{ } ) en de andere niet, dat het linkje mét active een andere hover(a:hover{ }) heeft dan het linkje zonder :active.

dus:
<style>
a:hover{
color: red;
}

/* dit weet ik dus niet */
a:active:hover{
color: blue;
}
</style>

<a href=''>een</a><!-- gewone, on hover dus rode kleur -->
<a href=''>twee</a><!-- active, dus on hover blauwe kleur-->

en met een scriptje van mij zegt een javascript dat de ene active is en de andere niet.

sorry voor onduidelijke uitleg :(
 
Laatst bewerkt:
De link is òf :hover òf :active, niet allebei, als de actieve link (dus de link waar op geklikt wordt) een ander uiterlijk moet hebben dan moet je :active gebruiken.
 
okee, het is voor een navigatie menu, met een scrollspy, dus als je ergens op een pagina bent, geeft hij in het blauw aan in het menu bij welk onderdeel je bent, maar als je over die blauw aangegeven item gaat, heeft hij een lelijke hover, dus vandaar die vraag.
En het javascript zegt dus dat hij de a:active style moet pakken, en daar staat dus in dat hij blauw is.
dus daarom een hover over een active.
 
Ik denk* dat je dan .active moet hebben. Dus links met de class active. :active slaat op de speudoclass active, dit is de link waar op dat moment op geklikt wordt, dus niet de link van de pagina die op dat moment geladen is. CSS weet namelijk helaal niet op welke pagina je bent.

*moeilijk om zeker te zijn zonder de site te zien.
 
Voorbeeld waarvan? ik zie daar nergens :active genoemd worden. De CSS selector voor het op dat moment geladen anker (dus het stuk in de link achter #) is :target,maar die werkt niet in IE8 en ouder.
 
Ja okee.
Maar het is een voorbeeld van dat het niet op meerdere paginas werkt.
Maar hoe zou ik met ern scrollspy met een verticaal menu de hover veranderen van het anker?
 
Als ze het geen eigen class heeft gekregen dan zou je :target:hover kunnen gebruiken. Maar, zoals ik al zei, dat werkt niet in oude versies van IE. Afhankelijk van je publiek hoeft dat natuurlijk geen probleem te zijn.
 
Ja ok, dan hebben de oudere IE gebuikers maar pech... :P
Maar hoe moet ik dat precies in css zetten?
 
Mmm, hij doet het nog niet.... Maar ja, ik heb nu een lichtblauwe hover overal, dus ook op de active, en dat is ook mooi :)
 
Stap 1
Je geeft alle menu-items een class mee met de naam van de link-pagina:
HTML: 
<ul id="menu">
    <li><a class="home" href="index.html">Home</a></li>
    <li><a class="portfolio" href="portfolio.html">Portfolio</a></li>    
    <li><a class="contact" href="contact.html">Contact</a></li>
    ... enz.
</ul>
Dit menu is hetzelfde voor alle pagina's (ook makkelijk voor een php-include).

Stap 2
Elke pagina krijgt in de <body> tag de naam van de pagina mee, maar nu als id:
  • De index.html krijgt: <body id="home">
  • De portfolio.html krijgt: <body id="portfolio">
  • enz.
Stap 3
In de css zet je bv. dit:
Code: 
#menu a { /* menu-items zonder hover */
    background: green;
    color: white;       
    }
#menu a:hover { /* menu-items bij hover */
    background: white;
    color: red;       
    }

/* en alleen voor het menu-item van de actuele pagina: */

#home #menu a.home,
#portfolio #menu a.portfolio,
... enz.
#contact #menu a.contact { 
    background: blue !important;
    color: yellow !important;
    }
Waarbij "blue" en "yellow" de achtergrondkleur en de tekstkleur zijn van het menu-item dat de actuele pagina is.
Door het "!important" worden steeds de gewone normale kleuren en de gewone hover-kleuren overruled.

Nu kan de css de pagina wel herkennen!
  • Alléén als er een id="home" in een pagina zit, wordt het item met de class="home" altijd blauw/geel, ook als er gehoverd wordt. En de id="home" staat alleen in de <body> van de homepage: op de homepage gebeurt dus niets bij een hover, en de rest van de menu-items krijgt gewoon de opgegeven hoverkleuren bij het hoveren.
  • Alléén als er een id="portfolio" in een pagina zit, wordt het item met de class="portfolio" altijd blauw/geel, ook als er gehoverd wordt. En de id="portfolio" staat alleen in de <body> van de portfolio.html: op de portfolio-pagina gebeurt dus niets bij een hover, en de rest van de menu-items krijgt gewoon de opgegeven hoverkleuren bij het hoveren.
  • Enz.
Allemaal zonder javascript. :)
En ook nog voor de arme IE-surfers die met IE8 of lager draaien. ;)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan