Css Snippets » verandering http://www.csssnippets.be Snippets for you, snippets for me Mon, 17 Oct 2011 08:42:00 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Link hover met achtergrondafbeelding http://www.csssnippets.be/2008/12/link-hover-met-achtergrondafbeelding/ http://www.csssnippets.be/2008/12/link-hover-met-achtergrondafbeelding/#comments Sun, 21 Dec 2008 17:10:35 +0000 Mark http://www.csssnippets.be/?p=59 Je hebt het al gezien, de links gestyld met afbeeldingen die veranderen als je er met de muis over uit gaat (hover).
Het meerdere deel van deze effecten wordt met JavaScript gerealiseerd, en ook is het (als er veel links zijn) nodig om de afbeeldingen te preloaden.
Deze tutorial leert je een techniek waarbij er geen JavaScript en/of preload aan te pas komt.

Download afbeelding

buttonex.jpg (127)

HTML

<div id="menu">
<a href="#">link #1</a>
<a href="#">link #2</a>
<a href="#">link #3</a>
<a href="#">link #4</a>
<a href="#">link #5</a>
</div>

CSS

#menu a
{
display:block;
width:120px;
margin: 1em 0;
padding:7px 0 10px 20px;
font: bold 14px sans-serif;
color:#BE670A;
background: url("buttonex.jpg") 0 0 no-repeat;
text-decoration: none;
}
#menu a:hover
{
background-position: -157px 0;
/*verschuiving 157px links*/
color: #F28F27;
}
#menu a:active
{
background-position: -314px 0;
/*verschuiving 2x 157px links*/
color:white;
}
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2008/12/link-hover-met-achtergrondafbeelding/feed/ 0