I am using a giant sprite for an element that changes different states at hover. I was wondering if there was a way to have the hover state image fade in? You can view my code live – here
Here’s my code for the hover state for each span
$(".hf-1").hover(
function () {
$(this).css("background-position","0 -121px");
$(".hf-2").css("background-position","0 -242px");
$(".hf-3").css("background-position","0 -363px");
$(".hf-4").css("background-position","0 -484px");
},
function () {}
);
I am using Jquery to do the background image hover instead of basic css cause i have multiple hovers that need to be reset.
Thanks for any help.
Use something like this:
Rinse and repeat for the other three.
You would need to double-stack the backgrounds and fade from to the other. Won’t be able to fade within the same container.
Or you can just use jquery’s native fadeIn API.