自定义鼠标提示

来源：互联网发布：贵金属网络销售怎么样编辑：程序博客网时间：2024/06/05 09:18

一介绍

利用position属性来显示隐藏着的<div>标签。当鼠标移动到指定目标时，显示出提示文字“自定义鼠标提示”。

二代码

<script type="text/javascript">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";}</script><body><p>将鼠标移动到红色方框中</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">自定义鼠标提示</span></div></body>

三运行效果

查看图片附件

0 0