设置title的样式

来源：互联网发布：单例模式 java 要求编辑：程序博客网时间：2024/06/05 02:42

浏览器默认的title样式不能修改，实际上是模拟title的样式

直接上demo：

<!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;    border:1px solid #333;    background:#f7f5d1;    padding:1px;    color:#333;    display:none;}</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>

效果图：
这里写图片描述

阅读全文

0 0