跟随鼠标悬浮层实例

最新推荐文章于 2021-06-04 04:29:04 发布

原创最新推荐文章于 2021-06-04 04:29:04 发布 · 334 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#鼠标 #悬浮 #层

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的鼠标提示层功能。当鼠标移动时，会在当前位置显示一个包含特定信息的浮动层。此功能通过监听鼠标移动事件并更新提示层的位置来实现。文章提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript">
//在鼠标显示一个层，该层的内空为div2的内容
function showTip2(){
  var ipadTwo = document.getElementById('ipadTwo'); //将要弹出的层
  ipadTwo.innerText="修改后的文字";
  ipadTwo.style.display="block"; //div2初始状态是不可见的，设置可为可见
  //window.event代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状.
  //clientX是鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
  ipadTwo.style.left=event.clientX+15; //鼠标目前在X轴上的位置，加10是为了向右边移动10个px方便看到内容
  ipadTwo.style.top=parseInt(event.y)+5+document.body.scrollTop;
  ipadTwo.style.position="absolute"; //必须指定这个属性，否则div1层无法跟着鼠标动
}

//关闭层div2的显示
function closeTip2(){
  var ipadTwo = document.getElementById('ipadTwo');
  ipadTwo.style.display="none";
}
</script>

<style type="text/css">
#ipadTwo {
    background: #FFF;
    border: dashed 1px #dddddd;
    opacity: 0.8; //
    -moz-opacity: 0.8;
    filter: alpha(opacity = 80);
    padding: 5px;
}
</style>
<div id="ipadTwo" style="display:none;" />