Yotube like comment-Show link over textarea when user try to add a comment

I'm working on asp.net application.And i'm looking for a way开发者_如何学Python to show a link over a textarea when a user try to add a comment if the user is not loggd in.

I've got this idea from Youtube videos comments.If ur not coonected,they show a link saying u have to login to be able to add a comment.

Does anyone has an idea how to do that.a piece of jquery code will be helpful.

Thanks in advance.

Best Regards, Rachid

You could do it with an overlay link that you placed over the textarea on mouseenter. Then it would just be a matter of hiding it on mouseleave:

HTML

<div id="comment">
    <textarea rows="3" cols="20"></textarea>
    <a class="overlay" href="" style="display: none; position: absolute;">You must login</a>
</div>

jQuery

$('#comment').mouseenter(function() {
    var textarea = $(this).find('textarea');
    var overlay = $(this).find('.overlay');

    var pos = textarea.position();
    overlay.css({
        top: pos.top,
        left: pos.left,
        width: textarea.width(),
        height: textarea.height(),
        display: 'block'
    });
});

$('#comment').mouseleave(function() {
    var overlay = $(this).find('.overlay');
    overlay.css({
        display: 'none'
    });
});

You can see it in action here.