繁體中文当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 鼠标在文本上移动时层的显示与消失
- HTML/XHTML教程
- 如何以及何时使用sIFR
- 提交表单后转到另一个文件
- 表格标签（table）深入了解
- 容易混淆使用位置的XHTML标签
- 类型File的Input按钮功能研究
- 注册表单设计的规则
- W3C建议的移动Web标记语言XHTML Basic 1.1
- 超级链接a的提示方式和打开方式
- 超级链接a的表现形式和打开方式
- xhtml css网页制作问题的解决方法
- 网页注释在IE中产生文字溢出
- HTML教程:有序列表
- HTML教程:无序列表
- HTML网页制作的强大8条技巧
- blockquote标记应用注意
- X/HTML5 和 XHTML2
- 以HTML网页实例说明head区代码的意思
- XHTML标记要合理使用
- DOCTYPE类型详细介绍
- 表单Form的submit事件不响应
HTML/XHTML教程 中的 鼠标在文本上移动时层的显示与消失
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-11-04 浏览: 26 ::
收藏到网摘: n/a
把这里的所有代码都放在<body>与</body>之间即可
<script language=javascript>
<!--
function hiddiv()
{
document.all.ab.style.display="none"
}
function showdiv()
{
document.all.ab.style.display=""
document.all.ab.style.left=window.event.clientX+15
document.all.ab.style.top=window.event.clientY
}
//-->
</script>
<div id=ab style="position: absolute; width: 126; height: 27; background-color: orange; display: none; left: 11; top: 36">地址：园区星海街东侧<br>电话：0512-65103588-206</div>
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td width="150"><a href="#" onmouseout=hiddiv(); onmousemove=showdiv();>发现之旅</a></td>
</tr>
</table>
当然了这里的功能比较简单，没有对浏览器类型进行判断，本人不才，就把这个问题留给各位了，欢迎每一位朋友来修改这个问题。
在这里还有一个问题就是如果文本不止一个、定义的层也就不止一个。如果还用这样的方法就会出错，我对这个问题研究了一下，用下面的这个方法就可以解决了。
<script language=javascript>
<!--
function hiddiv(blah)
{
blah.style.display="none"
}
function showdiv(blah)
{
blah.style.display=""
blah.style.left=window.event.clientX+15
blah.style.top=window.event.clientY
}
//-->
</script>
<div id=ab style="position: absolute; width: 126; height: 27; background-color: orange; display: none; left: 11; top: 36">地址：园区星海街东侧<br>电话：0512-65103588-20611</div>
<div id=cd style="position: absolute; width: 126; height: 27; background-color: orange; display: none; left: 11; top: 36">地址：新区明星街南侧<br>电话：0512-65103588-20622</div>
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td width="150"><a href="#" onmouseout=hiddiv(ab); onmousemove=showdiv(ab);>发现之旅</a></td>
</tr>
<tr>
<td width="150"><a href="#" onmouseout=hiddiv(cd); onmousemove=showdiv(cd);>和风景苑</a></td>
</tr>
</table>
如果有更多的文本和层的话以此类推即可。
在这里有几点要说明的就是：
1、showdiv中带参数时再用document.all.ab.style.display=""就不适用了，关于这点朋友们可以参考有关书籍
2、onmouseover与onmousemove的区别是：当鼠标移过当前对象时就产生了onmouseover事件,当鼠标在当前对象上移动时就产生了onmousemove事件，只要是在对象上移动而且没有移出对象的，就是onmousemove事件。我当前就是因为这个onmouseover事件惹的祸要不早就搞定了。今天写出来让朋友们也能注意这一点。
3、如果朋友们有更好的方法或有不明白的地方我们可以一起探讨。
4、有需要的朋友可以直接拿去用，本人保留版权
评论 (0) 