How to fade in a div on hover?

Question

I want to hover on an image, and have a div with text in it to fade in. Simple.

Sidenote: I want it to be style-able by CSS. (Kind of a given.) Also, I tried using some examples but I am in a hurry so please and thankyou.

Answer 1

If your using jQuery, Something like:

$('element').hover(function()
{
    $('div').animate({ 'opacity': 1 });
}); 

Answer 2

Try this: http://jsfiddle.net/2WYtS/

Answer 3

You can also use the fadeIn() and fadeOut() methods. Link

Answer 4

Try this:

<div class="hover">
    <img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" alt="google" />
</div>
<div class="fade" style="display:none">
    This text will Fade In and Out.
</div>​

$(document).ready(function()
{    
    $("div.hover").hover(
      function () {
        $("div.fade").fadeIn('slow');
      }, 
      function () {
        $("div.fade").fadeOut('slow');
      }
    );
});​

Sample code here

By the way, how do you want it to be CSS stylable?