鼠标浮动文本的实现

来源：互联网发布：淘宝商品类目编辑：程序博客网时间：2024/05/21 17:12

</pre>鼠标浮动文本：页面添加div：<pre name="code" class="html"><div id="titie" style="position: absolute; top: 500px; width: auto; background-color: #E7F3FF; display: none; z-index: 100000; border: 1px solid #e1e3e4; padding: 5px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px;"></div>

显示div:

function CreateDiv(val) {        var e = window.event        // //这里可得到鼠标X坐标        var pointX = e.pageX;        //这里可以得到鼠标Y坐标        var pointY = e.pageY;        $("#titie").css("top", pointY + 20);        $("#titie").css("margin-left", pointX);        $("#titie").html("<span>" + val + "</span>");        $("#titie").show();    }

隐藏div:

function RemoveDiv(val) {        $("#titie").hide();    }

添加元素对应的鼠标事件：

<span onmouseover="CreateDiv(' " + content + "')" onmouseout="RemoveDiv('" + content + "')"> + content + </span>;

0 0