Simple JQuery hover effect

Here is a simple hover effect you can implement with JQuery. I use this trick occasionally when I want to give buttons or images a hover effect, but don’t want to spend the time creating alternate versions of each image, and adding them to CSS.

Simply give the hoverable items the class ‘hovereffect’, and add this code to your header! It will fade out the opacity of the item on mouseover, and normalize the opacity on mouseout.

$('.hovereffect').mouseenter( function(){ 
    $(this).stop().animate({ opacity: 0.7 }, 200); 
}).mouseleave( function(){ 
    $(this).stop().animate({ opacity: 1.0 }, 200);
});