jquery实现标签提示

最新推荐文章于 2024-07-03 02:55:26 发布

天台的故事

最新推荐文章于 2024-07-03 02:55:26 发布

阅读量536

点赞数

分类专栏： HTMLCSSJS 文章标签： jquery

本文链接：https://blog.csdn.net/yuzengyuan/article/details/78647992

版权

HTMLCSSJS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

先看下效果图:
这里写图片描述
贴下代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <title>提示</title>
</head>

<style type="text/css">

.tishi{
    border:1px dotted #ffffff;
    width: 150px;
    height: 25px;
    font-size: 12px;
    background-color: #e06e0c;
    line-height:25px;
    color: #fffefe;
    font-weight: bolder;
    text-align:center;
    position:absolute;
    display:none;
}

</style>

<body align="center" style="padding-top:200px;">
    <a href="" title="这是第一个标签">这是第一个标签</a><p>
    <a href="" title="这是第二个标签">这是第二个标签</a><p>
    <a href="" title="这是第三个标签">这是第三个标签</a><p>
    <a href="" title="这是第四个标签">这是第四个标签</a><p>
</body>

</html>
<script type="text/javascript">

    $(document).ready(function(){

            //鼠标移进事件
            $("a").mouseover(function(e){
                //添加提示款
                $("body").append("<div class='tishi'>"+this.title+"</div>");
                //设置提示框坐标
                $('.tishi').css({
                    //第一种方式:鼠标第一次进入位置坐标弹出提示框
                    "top": e.pageY + "px",
                    "left": e.pageX  + "px"
                    /*第二种方式:在要提示的标签右下角弹出提示框
                    "top": $(this).offset().top+$(this).height() + "px",
                    "left": $(this).offset().left+$(this).width()  + "px"*/
                }).show(200);

             //鼠标移出事件
            }).mouseout(function(){
                //移除提示框
                $(".tishi").remove();   
            });
    });

</script>