鼠标悬浮效果,支持标签的属性

<script type="text/javascript" charset="utf-8" src="http://files.cnblogs.com/shuicaituya/mootools.js"></script>
<a id='tip1' href="http://mootools.net" title="mootools homepage" class="thisisatooltip">我的悬停很炫</a>
<script>
var myTips = new Tips('.thisisatooltip');
$('tip1').store('tip:title', '<h2 style="color:red">标题</h2>');
$('tip1').store('tip:text', '<div>这是我的正文</div>');
</script>可以模拟，先给你个能用的例子，我懒的写，你自己看吧
<html>
<head>
    <meta content="MSHTML 6.00.2800.1586" name="GENERATOR">    <script>
        var Class = {
            create: function() {
                return function() {
                    this.initialize.apply(this, arguments);
                }
            }
        }        var $ = function(id) {
            return document.getElementById(id);
        };        var mouseTip = Class.create();        ///*
        mouseTip.prototype = {
            initialize: function() {
                var mao = this;
                mao.randomId = ((new Date().valueOf()) * Math.random() + '').replace(/./g, '');
            },            randomId: null,            object: null, //指定div跟随的object            content: null, //指定div中的内容            width: '100px',            height: '30px',            getElementpos: function() {
                var mao = this;                var o = mao.object
                if (o) {
                    var t = o.offsetTop;
                    var l = o.offsetLeft;
                    var w = o.offsetWidth;
                    var h = o.offsetHeight;
                    while (o = o.offsetParent) {
                        t += o.offsetTop;
                        l += o.offsetLeft;
                    }
                    t += h;
                    return { top: t, left: l, width: w, height: h };
                }
                return null;
            },            show: function() {
                var mao = this;
                var o = mao.object;
                var t = mao.getElementpos().top, l = mao.getElementpos().left, w = mao.getElementpos().width, h = mao.getElementpos().height;                var parent = document.createElement('div'); //主层
                var ifr = document.createElement('iframe'); //用来覆盖窗体元素的iframe
                var div = document.createElement('div'); //用来装载提示内容的层                div.id = 'div' + mao.randomId;
                with (div.style) {
                    position = 'absolute';
                    width = mao.width;
                    height = mao.height;
                    top = '0px';
                    left = '0px';
                    zIndex = '10000';
                    padding = '5px';
                    overflowX = "hidden";
                    overflowY = "auto";
                };
                div.innerHTML = mao.content;                ifr.id = 'ifr' + mao.randomId;
                ifr.scrolling = 'no';
                with (ifr.style) {
                    position = "absolute";
                    width = mao.width;
                    height = mao.height;
                    top = "0px";
                    left = "0px";
                    border = "none";
                    zIndex = "-1";
                }                parent.id = 'parent' + mao.randomId;
                with (parent.style) {
                    position = "absolute";
                    left = l;
                    top = t;
                    width = mao.width;
                    height = mao.height;
                    padding = "0px";
                    border = "none";
                    zIndex = "1";
                }
                parent.appendChild(ifr);
                parent.appendChild(div);                document.body.appendChild(parent);
            },            hide: function() {
                var mao = this;
                var o = $('parent' + mao.randomId);
                if (o) {
                    document.body.removeChild(o);
                }
            }
        }
        //*/        var mao = new mouseTip();
        mao.content = "<span style='color:red;'>链接</span>";
        show = function(object) {
            mao.object = object;
            mao.show();
        };
        hide = function(object) {
            mao.object = object;
            mao.hide();
        };
    </script></head>
<body>
    <input id="btnMouseOver" onmouseout="hide(this);" onmouseover="show(this);" type="button"
        value="把鼠标移过来" />
    <a onmouseout="hide(this);" onmouseover="show(this);">把鼠标移过来</a>
</body>
</html>想起来有藏了这么个东西，随便看看……
难道没有其他的方法了吗？
我记的我看过个代码，标签里没有onmouseover，
有个自定义属性titleContent,该属性值包含标签，
也有title属性，title属性为空。
鼠标悬浮时一样能显示出titleContent的内容，并能解析标签。

调试易

鼠标悬浮效果,支持标签的属性

解决方案 »