js自定义鼠标提示

本文由清尘发表于2011-09-24 22:01最后修改于2014-04-24属于javascript分类

JS

function showTip(oEvent){
var oDiv=document.getElementById(“divTip1″);
oDiv.style.visibility=”visible”;
oDiv.style.left = oEvent.clientX+5;
oDiv.style.top = oEvent.clientY+5;
}

function hideTip(oEvent){
var oDiv=document.getElementById(“divTip1″);
oDiv.style.visibility=”hidden”;
}

HTML:

<p>Move your mouse over the red square.</p>
<div id=”div1″ style=”background-color:red; height:50px; width:50px;” onmouseover=”showTip(event)” onmouseout=”hideTip(event)”>
</div>
<div id=”divTip1″ style=”background-color:yellow; position:absolute; visibility:hidden; padding:5px;”>
<span style=”font-weight:bold;”>Custom Tooltip</span><br>
More details can go here.
</div>

演示:

222201of4rohofomp24qum