By: sasha

sasha — Thu, 10 Mar 2011 20:54:01 +0000

I tried using this on an form input as well and could not get it to work. perhaps an input button does allow the same .hover in css?

also, has anyone tried adding a .click event that holds the hover state (and fades out other buttons).

I would love to see that code or tutorial.

By: adrian7

adrian7 — Sat, 19 Feb 2011 10:31:56 +0000

Hey! Nice work, I will use it to make a download button for my blog, and who knows maybe I will also make a wp plugin with this. Thanks a lot!

By: felipee_marcon

felipee_marcon — Sun, 23 Jan 2011 22:59:39 +0000

Cool, very cool. I’m using on my blog http://www.screenentertainment.net/

The site is cool. Already in my favorites (:

By: Tutoriels web et webdesign « Web Design

Tutoriels web et webdesign « Web Design — Tue, 18 Jan 2011 14:35:08 +0000

[...] 4. Des boutons animés à l’aide de sprites et Jquery (partie 2 : Code) [...]

By: joeblog

joeblog — Sat, 18 Dec 2010 14:20:20 +0000

Can anyone help me with this issue. it been bugging me for days.

*{
padding:0;
margin-top: 10;
margin-right: auto;
margin-bottom: 10;
margin-left: auto;
}
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #999;
background-color: #FFF;
}
#content {
height: 400px;
width: 1000px;
margin-right: auto;
margin-left: auto;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

.nav {
background: url(images/navApple.gif);
height: 40px;
width: 876px;
padding: 0;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

}

.nav li {
list-style-type: none;
float: left;
text-align: center;
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
margin: 0px;
padding: 0px;
}
/*
.nav a {
height: 39px;
display: block;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
text-decoration: none;
line-height: 35px;
color: #666;
text-transform: none;

}
.nav a:hover{
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #FFF;

}
*/
.navHome1 {
float:left;
display: block;
width: 112px;
height: 40px;
}
.navHome1 span.hover {
display: block;
position: absolute;
width:112px;
height:40px;
background: url(images/navApple.gif) 0 -40px no-repeat;
}
.navHome2 {
float:left;
display: block;
width: 120px;
height: 40px;
position:relative;}

.navHome2 span.hover {
position: absolute;
width:116px;
height:40px;
background: url(images/navApple.gif) -112px -40px no-repeat;
}

.navHome3{
float:left;
display: block;
width: 127px;
height: 40px;
position:relative;
}

.navHome3 span.hover {
position: absolute;
width:125px;
height:40px;
background: url(images/navApple.gif) -231px -40px no-repeat;
}
.navHome4{
float:left;
display: block;
width: 125px;
height: 40px;
position:relative;
}
.navHome4 span.hover {
position:absolute;
width:123px;
height:39px;
background: url(images/navApple.gif) -360px -40px no-repeat;
}
.navHome5{
float:left;
display: block;
width: 137px;
height: 40px;
position:relative;
}
.navHome5 span.hover {
position:absolute;
width:135px;
height:39px;
background: url(images/navApple.gif) -485px -40px no-repeat;
}
.navHome6{
float:left;
display: block;
width: 132px;
height: 40px;
position:relative;}
.navHome6 span.hover {
position:absolute;
width:130px;
height:39px;
background: url(images/navApple.gif) -620px -40px no-repeat;
}
.navHome7{
float:left;
display: block;
width: 123px;
height: 40px;
position:relative;}
.navHome7 span.hover {
position:absolute;
width:122px;
height:39px;
background: url(images/navApple.gif) -753px -40px no-repeat;

}

/*
.nav1 { width: 112px;}
.nav2 { width: 120px; }
.nav3 { width: 128px; }
.nav4 { width: 125px; }
.nav5 { width: 137px; }
.nav6 { width: 131px; }
.nav7 { width: 123px; }
*/
/*
.nav1 a:hover {
background: url(nav.gif) 0 -40px no-repeat;
}
.nav2 a:hover {
background: url(nav.gif) -111px -40px no-repeat;
}

.nav3 a:hover {
background: url(nav.gif) -232px -40px no-repeat;
}

.nav4 a:hover {
background: url(nav.gif) -360px -40px no-repeat;
}

.nav5 a:hover {
background: url(nav.gif) -484px -40px no-repeat;
}

.nav6 a:hover {
background: url(nav.gif) -622px -40px no-repeat;
}

.nav7 a:hover {
background: url(nav.gif) -753px -40px no-repeat;
}

it works fine in IE and safari but not in firefox!
help!

By: Khalid

Khalid — Fri, 10 Dec 2010 13:19:47 +0000

Yes correct, but don’t forget the ‘ – ‘ in no-repeat. I don’t know how I have missed that!
I actually don’t specify the mentioned CSS properties in my stylesheets, but maybe I thought – at the moment I wrote this -that it would be better for the learning aspect. So the readers that have never heard of sprites, would understand it.

By: ashishanexpert

ashishanexpert — Wed, 08 Dec 2010 06:48:55 +0000

Anyway, thanks for this really Effective tutorial…