CODEWITHSUNDEEP
jquery
styler
styler

Reputation: 16481

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 over 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?

Upvotes: 0

Views: 2361

Answers (3)

daryl
daryl

Reputation: 15197

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?

Upvotes: 1

donk
donk

Reputation: 1570

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.

Upvotes: 1

BJ Safdie
BJ Safdie

Reputation: 3419

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

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

Upvotes: 0

Related Questions