Beste SD Leden,

Ik ben wel eens benieuwd naar hoe jullie een Mouse-over in CSS maken, voorheen deed ik dit altijd met een stukje javascript. Maar ik wil gewoon alles in me css-file hebben.
Ik heb gegoogled en kom tot de conlusie dat veel mensen gebruik maken van het de normale afbeelding en de mouse-over onder elkaar en deze met CSS heen en weer te schuiven.

Ik zou graag van jullie horen hoe jullie dit probleem aanpakken, eventueel met bijbehoorende CSS. Hopelijk komen er zo meerdere oplossingen aan het licht die ik, en andere, kunnen proberen.

Vriendelijke Groet,

Jos

Je kunt de :hover-pseudo-class gebruiken, hoewel dit buggy is in IE. IE accepteert dit namelijk alleen maar op het <a />-element, terwijl andere browsers het voor elk element accepteren.
Gelukkig is het mogelijk met wat hacks hier omheen te komen, maar het blijft jammer dat het niet native met CSS kan.

Origineel gepost door Martijn Engler

Je kunt de :hover-pseudo-class gebruiken, hoewel dit buggy is in IE. IE accepteert dit namelijk alleen maar op het <a />-element, terwijl andere browsers het voor elk element accepteren.
Gelukkig is het mogelijk met wat hacks hier omheen te komen, maar het blijft jammer dat het niet native met CSS kan.

Het hover aspect is iig bij mij wel bekend bij Textlinks, maar ik zou graag wat informatie willen hoe jullie het aanpakken met bijv. een veranderende image. (en niet te flauw door te antwoorden de LI image te veranderen). Ik zoek dus wat meer informatie over een Afbeelding waarover je hoverd en vervolgens de afbeelding veranderd.

Een nette oplossing imo is om ipv een image te gebruiken, een anchor te nemen met style:block.

Hier is een voorbeeld:
http://quickcards.bytelogic.be/
Het grote menu (met de getallen achter) zijn hyperlinks met style:block. De achtergrond is dan de afbeelding met de getallen. Door a:hover te doen kan je de achtergrond veranderen.

Stukje html:

Code:

<a class="title-1" href="#">Home</a>
<a class="title-2" href="#">Cards</a>
<a class="title-3" href="#">About</a>
<a class="title-4" href="#">Login</a>
<a class="title-5" href="#">Help ?</a>

En de achterliggende css (versimpeld voorbeeld):

Code:

.title-1 { 
   display:block;
   width:40px;
   height:37px; 
   float:left; 
   text-decoration:none;
   background:url(img/title-1.png) no-repeat;
}

.title-1:hover { 
   background:url(img/title-2.png) no-repeat;
}

Ok Super... zijn er nog meer mensen met een andere oplossing voor dit probleem?

Enkele links:

http://www.gigadesign.be/2004/12/css...e-over-effect/
http://www.gigadesign.be/2005/10/een...ock-navigatie/

Origineel gepost door Dirk Bonhomme

Een nette oplossing imo is om ipv een image te gebruiken, een anchor te nemen met style:block.

Hier is een voorbeeld:
http://quickcards.bytelogic.be/
Het grote menu (met de getallen achter) zijn hyperlinks met style:block. De achtergrond is dan de afbeelding met de getallen. Door a:hover te doen kan je de achtergrond veranderen.

Stukje html:

Code:

<a class="title-1" href="#">Home</a>
<a class="title-2" href="#">Cards</a>
<a class="title-3" href="#">About</a>
<a class="title-4" href="#">Login</a>
<a class="title-5" href="#">Help ?</a>

En de achterliggende css (versimpeld voorbeeld):

Code:

.title-1 { 
   display:block;
   width:40px;
   height:37px; 
   float:left; 
   text-decoration:none;
   background:url(img/title-1.png) no-repeat;
}
 
.title-1:hover { 
   background:url(img/title-2.png) no-repeat;
}

Mijn layout :D

I hope you don't mind ;)

Nee hoor, als je er iemand mee kan helpen ga je gang :)

http://www.mastercode.nl/artikel/42/

Mooi artikel vind ik zelf! :)

Inderdaad, goeie link Riny!

Bedankt voor jullie reacties jongens, denk dat ik er zo wel uitkom :)