Title提示样式修改

最新推荐文章于 2023-07-25 09:16:53 发布

weixin_30363981

最新推荐文章于 2023-07-25 09:16:53 发布

阅读量426

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jinsuo/p/9027790.html

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery跟随提示信息</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
#tooltip{
    position:absolute;
   padding-left: 10px;
   padding-right: 10px;
    background:#3499da;  
    color:#fff;
    display:none;
    height: 30px;
    line-height: 30px;
    border-radius: 16px;
}</style>
</head>
<body>
<ul>
    <li><a href="###1" class="tooltip" title="[活动]春鞋迎春大促">[活动]春鞋迎春大促</a>
    </li>
    <li><a href="###1" class="tooltip" title="[活动]秋冬服装大促">[活动]秋冬服装大促</a>
    </li>
    <li><a href="###1" class="tooltip" title="[活动]床品大促">[活动]床品大促</a>
    </li>
    <li><a href="###1" class="tooltip" title="[活动]家电大促">[活动]家电大促</a>
    </li>
    <li><a href="###1" class="tooltip" title="[活动]百货促销">[活动]百货促销</a>
    </li>
</ul>

<script>
var x = 10;
var y = -20;
var newtitle = '';
$('a.tooltip').mouseover(function(e) {
    newtitle = this.title;
    this.title = '';
    $('body').append('<div id="tooltip">' + newtitle + '</div>');
    $('#tooltip').css({
        'left': (e.pageX + x + 'px'),
        'top': (e.pageY + y + 'px')
    }).show();
}).mouseout(function() {
    this.title = newtitle;
    $('#tooltip').remove();
}).mousemove(function(e) {
    $('#tooltip').css({
        'left': (e.pageX + x + 'px'),
        'top': (e.pageY + y + 'px')
    }).show();
})
</script>

</body>
</html>

转载于:https://www.cnblogs.com/jinsuo/p/9027790.html

weixin_30363981

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Title提示样式修改

<!doctype html><html><head><meta charset="utf-8"><title>jQuery跟随提示信息</title><script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></s...
复制链接

扫一扫