JavaScript-jquery 实现动态添加div提示信息

服务器管理 服务器管理 主题:1035 回复:2217

JavaScript-jquery 实现动态添加div提示信息

甜柠檬 发布于 2017-01-29 字数 250 浏览 938 回复 2
<a href="#" class="c_t">悬浮</a>
<a href="#" class="c_t">悬浮</a>
<a href="#" class="c_t">悬浮</a>
<a href="#" class="c_t">悬浮</a>
......

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(2

想挽留 2017-08-04 2 楼

创建提示div: $("<div>"+alt+"</div>")
的返回值就是该对象,只要移除的时候删除这个对象就可以,不用其他属性指定(id,class等)

下边是一个不通过id以及其他属性删除元素的例子:

<a href="#" class="c_t" title="提示1">悬浮</a>
<a href="#" class="c_t" title="提示2">悬浮</a>
<a href="#" class="c_t" title="提示3">悬浮</a>
<a href="#" class="c_t" title="提示4">悬浮</a>

<script type="text/javascript">

$('.c_t').mouseover(function(e){
var alt = $(this).attr('title');
$(this).attr('title','');
var dhtml = $("<div>"+alt+"</div>").css({position:'absolute',top:(e.pageY+10)+'px',left:(e.pageX+5)+'px',display:'none'});
dhtml.appendTo('body').fadeIn();
$(this).unbind('mouseout').mouseout(function(){
$(this).attr('title',alt);
dhtml.fadeOut(100,function(){$(this).remove()});
})
})
</script>

想挽留 2017-05-02 1 楼

找了一个比较精简的一个方法:

 $(document).ready(function() {
obj = $('a.c_t');

obj.mouseover(function() {
    if(!$.data(this, 'ref')) {
        $.data(this, 'ref', $ref = $('&lt;div&gt;', {
             html:   '你已悬浮在我上面了!'
        }).appendTo(document.body));
    }
}).mouseout(function() {
    $.data(this, 'ref').remove();
});

});