Change Background on hover with jQuery

I'm trying to figure what a simple jQuery code is to fade in an rgba background colour on hover and then fade out when you move your mouse off the div.

The reason I say "rgba" is becau开发者_C百科se it needs to be 70% opaque black but if that can be done with jQuery's own opacity, then that's cool.

A perfect example is http://dalhov.se except they use a more complicated method that I'm having a hard time studying.

Thanks, Wade

here you are

http://jsfiddle.net/samccone/EpmKC/

you need to include jquery UI or the color plugin

Check out this thread for more info

EDIT: All you need is jQuery's fadeTo function...

Demo: http://jsfiddle.net/wdm954/5Hef6/5/

I believe this is most similar to your example url.

$('#bg').fadeTo(1, 0);
$('#content').hover(function() {
    $('#bg').stop().fadeTo(300, 0.7);  
}, function() {
    $('#bg').stop().fadeTo(300, 0);
});

In this demo the DIVs are layered. If you drop the opacity of a DIV that contains content your opacity will effect the content also.

Darn beat me to the punch, I'll throw mine up anyway though http://jsfiddle.net/mazzzzz/Wfech/

I think you use below code without JQuery.

In style

#divDemo{background-color:#FF0000;height:50px;width:200px;}
#divDemo:hover{background-color:#DDDDDD;height:50px;width:200px;}

In HTML

<div id="divDemo"></div>