jquery实现标签提示

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

<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>

代码很简单。就不解释了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值