title样式的一些改变

第一种：直接换行实现，也是html的title实现方法；

<a href='http://www.divcss5.com/jiqiao/j510.shtml'

    title='标题：DIVCSS5
    作者：DIVCSS5
    转贴自：CSS原创
    更新时间：2013-05-17
    推荐等级：无
    关键字：title换行
    分页方式：不分页

阅读等级：普通'>html title属性换行</a> <br><br><br>

第二种：js实现换行：

        var a =document.createElement('a');
       //a.setAttribute('id','fox');
       a.setAttribute("title","标题：失败Ip\nIP:192.2.2.2\n测试：0\n测试：成功");
       a.innerHTML = '哈哈哈哈';

document.getElementsByTagName('body')[0].appendChild(a);

第三种：动态改变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"></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>

第四种：可以直接推翻title，属性，自己写一个，定位，划过，定时器等等，都可以实现。希望大家多提意见

title样式的一些改变

猜你喜欢