Youtube 喜欢评论 - 当用户尝试添加评论时，在文本区域上显示链接

Question

我正在开发 asp.net 应用程序。并且我正在寻找一种方法来在用户未登录时尝试添加评论时在文本区域上显示链接。

我从 Youtube 视频 cmets 中得到了这个想法。如果你没有连接，他们会显示一个链接，说你必须登录才能添加评论。

有没有人知道如何做到这一点。一段 jquery 代码会有所帮助。

提前致谢。

最好的问候， 拉希德

Answer 1

您可以使用放置在mouseenter 上的文本区域上的覆盖链接来完成此操作。那么只需将其隐藏在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'
    });
});

你可以看到in action here。