jQuery：超链接title提示和图片提示效果

最新推荐文章于 2019-12-30 16:23:14 发布

原创最新推荐文章于 2019-12-30 16:23:14 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

代码集专栏收录该内容

51 篇文章

订阅专栏

本文介绍了一种使用JavaScript和jQuery实现的鼠标悬停显示动态提示框的方法。当鼠标悬停在指定元素上时，会动态创建并显示一个包含元素标题的提示框，并随着鼠标移动而调整位置；当鼠标移开时，提示框消失。

function titleA(name) {
    var x=10;
    var y=10;
    $(name).mouseover(function(e){
        this.myTitle=this.title;
        this.title="";
        this.imgTitle = this.myTitle?"<br/>" + this.myTitle :""
        var tooltip="<div id='tplink'>"+this.myTitle+"</div>";
        $(this).parent().append(tooltip);
        setTimeout(function(){
            $("#tplink").show();
        },1000)

    }).mouseout(function(){
        this.title=this.myTitle;
        $("#tplink").remove();
    }).mousemove(function(e){
        $("#tplink").css({"top": (e.pageY+y) + "px","left": (e.pageX+x) + "px"});
    })
}