Easy javascript hover effects

It's very important that buttons change their appearance when hovering over them with the mouse cursor. This gives the user more indication that the button can be clicked and we can do it in a number of ways. One of the easiest ways to create a hover effect is with javascript. Below we will show you how to use Jquery to perform such an action. But first let's go over the old ways of creating hover effects.

One option is to create two images, one for the normal button state and the second for the hover state. We then swap over the images when the user is hovering over the button. This can be done as follows.

.button-action, .button-action:visited { background: url(images/template/btn_calltoaction.jpg) no-repeat; } .button-action:hover { background: url(images/template/btn_calltoaction_hover.jpg) no-repeat; }

The problem with the above technique is that the hover effect may cause a slight flicker. The reason for this is because the second image needs to be downloaded by the user as soon as they hover over the button. This is what causes the flicker. The solution to this problem is called CSS spriting:

.button-action, .button-action:visited { background: url(images/template/btn_calltoaction.jpg) no-repeat; } .button-action:hover { background: url(images/template/btn_calltoaction.jpg) no-repeat 0px -45px; }

By saving a normal background image, plus the hover image together, we can create our effect by changing our background starting position.

But what happens if we don't have access to the images of the site? What happens if we don't have time to create hover images for all our buttons? The best solution in these circumstances is to create a hover effect with jquery.

/*** fade buttons on hover ***/ $('.js-hover').bind('focus mouseover', function() { $(this).fadeTo('fast', 0.75); }); $('.js-hover').bind('blur mouseout', function() { $(this).fadeTo('fast', 1); }); /*** end fade hover ***/ Get a quote button that has a jquery hover effect attached to it

Our buttons should now fade nicely when the user hovers over them with the mouse and we didn't need to create any extra images.