Hover over content div to reveal read more link

I'm new to jQuery and trying to learn and also implement. What I would like to do is have a content div that maybe holds an image, header and content. When this div is hovered ov开发者_如何学JAVAer the div is overlayed with a transparent color and a read more link is also displayed.

Can anyone give me some advice on how this would be achieved or if there are any good tutorials online that can teach me this technique?

I recently made a plugin that includes what you're after.

You'll want to set the zoom to 0, let me know if you use it and need any help setting it up: Here's a link to the demo, the sort of thing you're after is the right image correct?

Just the basics to get the idea:

<div id="content">This is the hovered content.</div>
<div id="readmore" style="display:none;">Read more...</div>
<script type="text/javascript">
$(function(){
    $('#content').mouseover(function(){
        $('readmore').show();
    });
    $('#content').mouseover(function(){
        $('readmore').hide();
    });
});
</script>

Do browse through jQuery website for good examples on documentation.

Check out the jQuery qTip plug-in. You can do what you want with some nice cross-browser style.

http://craigsworks.com/projects/qtip/