gerardwillems
Nieuwe gebruiker
- Lid geworden
- 9 jan 2011
- Berichten
- 3
Hoe maak ik een hover aan en verander de kleur als de muis er over heen gaat. Ik snap niets van de uitleg van het boek wat ik gebruik
dreamweaver cs5
- Onderwerp starter gerardwillems
- Startdatum
- Status
Gebruik eens een fatsoenlijke titel voor je topic mensen, "Dreamwaver CS5" is wel erg nietszeggend.
Hoe dan ook, het is simpel, je kunt met CSS aangeven wat een element moet doen als je er met de muis op staat. Stel, je wilt dat links groen worden als iemand er met de muis overheen gaat. De CSS wordt dan.
Je kunt dit ook voor ieder ander element doen simpelweg door :hover achter de naam van het element te plaatsen.
Wat voor methode raadt je boek aan?
Hoe dan ook, het is simpel, je kunt met CSS aangeven wat een element moet doen als je er met de muis op staat. Stel, je wilt dat links groen worden als iemand er met de muis overheen gaat. De CSS wordt dan.
Code:
a:hover{
color:green;
}Wat voor methode raadt je boek aan?
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Aanvulling:
En zet er meteen even de "focus" eigenschap bij in de link-stijl:
Op die manier verandert de link ook van kleur als de link "focus" heeft. De meeste handleidingen vergeten helaas om dat er bij te zetten, maar het is wel belangrijk voor de toegankelijkheid van de pagina voor een zo groot mogelijk publiek (klanten!).
Waarom?
Mensen die zonder muis (moeten) surfen, kunnen de Tab-toets gebruiken om van link naar link op de pagina te springen. De link waar je zit krijgt dan "focus". Zodra een link focus heeft, kan je met Enter de link aanklikken.
Zonder focus-eigenschap *) ziet een muisloze surfer niet goed waar ie op de pagina zit > dan zijn de links niet bereikbaar > dan is de pagina ontoegankelijk, en kom je niet verder dan de homepage!
Met vriendelijke groet,
CSShunter
__________
*) Daarvoor zijn ook de mini-stippeltje bedoeld die om een link verschijnen. Maar die zijn door de opmaak (kleurgebruik, afbeeldingen) soms erg moeilijk te zien. Vandaar: ook altijd de :focus bij een :hover!
- Test maar eens op deze pagina: muis op z'n kop leggen en met de Tab-toets door de links heen wandelen. Zie je altijd waar je zit?
Met a:focus{background: yellow;} zou geen misverstand mogelijk zijn!
En zet er meteen even de "focus" eigenschap bij in de link-stijl:
Code:
a:hover,
a:focus {
color: green;
}Waarom?
Mensen die zonder muis (moeten) surfen, kunnen de Tab-toets gebruiken om van link naar link op de pagina te springen. De link waar je zit krijgt dan "focus". Zodra een link focus heeft, kan je met Enter de link aanklikken.
Zonder focus-eigenschap *) ziet een muisloze surfer niet goed waar ie op de pagina zit > dan zijn de links niet bereikbaar > dan is de pagina ontoegankelijk, en kom je niet verder dan de homepage!
Met vriendelijke groet,
CSShunter
__________
*) Daarvoor zijn ook de mini-stippeltje bedoeld die om een link verschijnen. Maar die zijn door de opmaak (kleurgebruik, afbeeldingen) soms erg moeilijk te zien. Vandaar: ook altijd de :focus bij een :hover!
- Test maar eens op deze pagina: muis op z'n kop leggen en met de Tab-toets door de links heen wandelen. Zie je altijd waar je zit?
Met a:focus{background: yellow;} zou geen misverstand mogelijk zijn!
gerardwillems
Nieuwe gebruiker
- Lid geworden
- 9 jan 2011
- Berichten
- 3
Het is me niet gelukt met deze regels. Als ik dit in type komt het als tekst in het scherm te staan, maar het doet niets. Ik heb nu een animatie met daaraan gekoppeld een hyperlink. Nu wil ik daar ook een hover over laten gaan hoe moet ik dat doen. Daar is toch wel een eenvoudige manier voor
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Hoi Gerard,
Probeer dit eens:
Maar wat bedoel je precies met "animatie"?
Geef anders even een link naar een online (test-)pagina, dan is de oplossing waarschijnlijk nabij.
En ken je deze al? www.web-garden.be/cursus-html/cursus-html/
Met vriendelijke groet,
CSShunter
Aha. Dan heb je waarschijnlijk de css-regels "koud in de html" gezet, in plaats van in een stylesheet of in een style-blok in de <head> van de pagina.
Probeer dit eens:
HTML:
...
<head>
...
<style type="text/css">
a:hover,
a:focus {
color: green;
}
</style>
</head>
<body>
...Geef anders even een link naar een online (test-)pagina, dan is de oplossing waarschijnlijk nabij.
En ken je deze al? www.web-garden.be/cursus-html/cursus-html/
Met vriendelijke groet,
CSShunter
- Status
