jQuery:鼠标放上链接时提示文字 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
        <style>
            .btn{
                display: block;
                width: 100px;
                height: 30px;
                border-radius: 6px;
                background: #cccc00;
                font: 14px/30px arial;
                text-align: center;
                text-decoration: none;
                color: #FFF8F1;
                transition: all .18s .1s;
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <a href="#" class="btn" title="按钮元件">btn</a>
        <script>
            $(function(){
                $('a.btn').mouseover(function(e){
                    var x = 10;
                    var y = 10;
                    this.myTitle = this.title;
                    this.title = '';
                    var tooltip = '<div id="tooltip">'+this.myTitle+'</div>'
                    $('body').append(tooltip);
                    $('#tooltip')
                        .css({
                            'position':'fixed',
                            'top':(e.pageY+y)+'px',
                            'left':(e.pageX+x)+'px'
                        }).show('fast');
                }).mouseout(function(){
                    this.title = this.myTitle;
                    $('#tooltip').remove();
                }).mousemove(function(e){
                    var x = 10;
                    var y = 10;
                    $('#tooltip')
                        .css({
                            'top':(e.pageY+y)+'px',
                            'left':(e.pageX+x)+'px'
                        })
                })
            })
        </script>
    </body>
</html>

 

posted @ 2016-11-18 17:44  深圳80后  阅读(296)  评论(0)    收藏  举报