Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[HTML/CSS] A:hover ID probleem

9 antwoorden
  • Ik gebruik dus a:hover voor alle links op mijn website, alleen wil voor de menulinks een ander effect hebben dan bij mn normale links. Ik gebruik daar dus 'id' voor, ik geef mn <A> een Id mee, en dan roep ik hem op door in de stylesheet a:hover#Id te gebruiken. Maar nu komt het dus wel eens voor dat ik een paar links heb met dezelfde ID, omdat ze hetzelfde effect moeten geven, maar dat vindt de W3C XHTML validatie niet zo leuk. Die zegt dat elke ID uniek moet zijn :evil:. Ik heb al geprobeerd om alle links met hetzelfde effect in 1 DIV te zetten, maar dat werkt niet in IE (wel in firefox). Heeft iemand een andere oplossing?
  • Heb je al eens gedacht een 'class' mee te geven i.p.v. een 'id'?
  • ja, maar hoe roep je dat dan aan, aangezien het om een a:hover gaat? Als je een link een class meegeeft, kan je hem niet aanroepen in je stylesheet, voor zover ik weet. a:hover#bla werkt wel als je ID 'bla' is. a:hover#bla werkt niet als je class 'bla' is.
  • a:hover.bla? .class? dacht ik? peace
  • Zo werkt het toch prima? class versie1 doet het omgekeerde van class versie2. Dat meer van dezelfde ID's niet gevalideerd worden is logisch. Een ID moet uniek zijn. Voor meer van het zelfde heb je juist de class. [code:1:e97b544e65] <html> <head> <title>a:hover met class</title> <style> li { margin:0; list-style-type:none } a:link.versie1 { text-decoration: none } a:active.versie1 { text-decoration: underline } a:visited.versie1 { text-decoration: none } a:hover.versie1 { text-decoration: underline } a:link.versie2 { text-decoration: underline } a:active.versie2 { text-decoration: none } a:visited.versie2 { text-decoration: underline } a:hover.versie2 { text-decoration: none } </style> </head> <body> <ul> <li><a href="#" class="versie1">linkje</a></li> <li><a href="#" class="versie1">linkje</a></li> <li><a href="#" class="versie1">linkje</a></li> <li><a href="#" class="versie1">linkje</a></li> </ul> <ul> <li><a href="#" class="versie2">linkje</a></li> <li><a href="#" class="versie2">linkje</a></li> <li><a href="#" class="versie2">linkje</a></li> <li><a href="#" class="versie2">linkje</a></li> </ul> </body> </html> [/code:1:e97b544e65]
  • Het antwoord van Pyrrus moet inderdaad werken. naam#iets is voor id's naam.iets is voor classes Dit staat ook gewoon uitgelegd op de website van w3schools
  • jep het werkt perfect! Bedankt he.
  • Waaorm dan niet:[code:1:52f4a0fbad]ul#nav li{ /* */ }[/code:1:52f4a0fbad]... in plaats van het CLASS attribuut [i:52f4a0fbad]overbodig[/i:52f4a0fbad] te gebruiken.
  • [quote:821af81698="Anne"]Waaorm dan niet:[code:1:821af81698]ul#nav li{ /* */ }[/code:1:821af81698]... in plaats van het CLASS attribuut [i:821af81698]overbodig[/i:821af81698] te gebruiken.[/quote:821af81698] Omdat niet alle LI's dezelfde eigenschap qua a:hover mee moeten krijgen, dus het attribuut is niet overbodig.

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.