Question

Say I have a div with a link in it. When I hover over it I want another div to fade in above it with some content and then fade away on mouse over.

Example found here:
http://bit.ly/c59sT4

Answer 1

You can do something re-usable using .hover() and the fading functions, like this:

$(".container").hover(function() {
    $(this).find(".hover").fadeIn();
}, function() {
    $(this).find(".hover").fadeOut();
});

For example, here’s the demo markup, though the <div> elements can contain anything:

<div class="container">
    <div class="hover">
        Content Here
    </div>
    <a href="#">Link</a>
</div>

Then via CSS you just position that inside <div> absolutely and the give it the same size, like this:

.container, .hover { width: 100px; height: 300px; background: white; }
.hover { position: absolute; display: none; }

You can give it a try here.