通过鼠标的移动来实现层的隐藏与显示

来源:互联网 发布:淘宝网电脑下载安装 编辑:程序博客网 时间:2024/06/07 12:10
<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>
0 0
原创粉丝点击