通過滑鼠的移動來實現層的隱藏與顯示

李世榮發表於2014-12-02
<html>
<head>
<title>Style Test</title>
<script type="text/javascript" language="javascript">
function showTip(){
var oDiv=document.getElementById("divTip1");
oDiv.style.visibility="visible";
}
function hideTip(){
var oDiv=document.getElementById("divTip1");
oDiv.style.visibility="hidden";
}
</script>
</head>
<body>
<p>Move your mouse over the red square</p>
<div id="div1" style="background-color:red;height:50px;width:50px" onmouseover="showTip()" onmouseout="hideTip()">
</div>
<div id="divTip1" style="background-color:green;position:absolute;visibility:hidden;padding:50px">
<span style="font-weight:bold">Custom Tooltip</span><br />
More details can go here.
</div>
</body>
</html>

相關文章