- <!doctype html>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- title 样式修改
- </title>
- <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
- </script>
- <style>
- #tooltip{ position:absolute; border-top: 5px solid #009688; border-radius:
- 0 2px 2px 0; background-color: #f2f2f2; padding: 10px; color:#333; font-size:
- 14px; -webkit-box-shadow:0 5px 15px rgba(0,0,0,.2); box-shadow: 0 5px 15px
- rgba(0,0,0,.2); -webkit-transform: translate3d(0,-2px,0); transform: translate3d(0,-2px,0);
- 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>
来源: http://www.qdfuns.com/note/30533/185571aa3be07622223fc78cc9f7ddea.html