css修改title样式

作者: 肆意木 | 来源:发表于2018-11-28 11:42 被阅读2次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div style="margin-top: 50px;margin-left: 20px">
    <button title="button1">button1</button>
    <button title="button2">button2</button>
</div>
</body>
<script>
    $(document).bind('mouseover mouseout mousemove',function (event) {
        var left = event.pageX,top = event.pageY,title = event.target.title,type = event.originalEvent.type;
        if(type === 'mouseover'){
            if(title !== null){
                var ele = $('<div></div>',{text:title,class:'titleClass'}).css({
                    position:'absolute',
                    color:'red'
                })
                ele.appendTo('body')
            }
        }else if (type === 'mouseout'){
            $('.titleClass').remove();
        }else if(type === 'mousemove'){
            $('.titleClass').css({
                top:top-30,
                left:left-10
            })
        }
    })
</script>
</html>