随鼠标浮动的层，style.left属性赋值问题

最新推荐文章于 2022-09-08 00:51:55 发布

Cnami

最新推荐文章于 2022-09-08 00:51:55 发布

阅读量4k

点赞数

分类专栏： JavaScript 文章标签： firefox div ie function html

本文链接：https://blog.csdn.net/cnami/article/details/2494242

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

今天需要做一个效果，当鼠标移动到一个图片上时，就显示一段文字介绍。需要用js操纵一个浮动的层。我很快按要求写好了，在IE下浏览一切正常，但是在firefox下却不行。浮动的层，怎么也动不起来。
经过一番查找，终于找到原因：
var o = document.getElementById("hidDiv");
//o.style.left = e.clientX;//这种赋值方法，IE下可以，在firefox下不起作用
//o.style.top = e.clientY;
正确的赋值方法：
o.style.left = e.clientX+"px";
o.style.top = e.clientY+"px";

网页：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>

    <script type="text/javascript">
    function showDiv(e)
    {
    var o = document.getElementById("hidDiv");
    //o.style.left = e.clientX;//这种赋值方法，IE下可以，在firefox下不起作用
    //o.style.top = e.clientY;
    o.style.left = e.clientX+"px";
    o.style.top = e.clientY+10+"px";
    o.style.display="block";
    }
    </script>

</head>
<body>
    <div style="width: 168px; height: 24px; background-color: #ffff66;" οnmοuseοver="showDiv(event)">
    </div>
    <div style="width: 168px; height: 24px; background-color: #ccff66;" οnmοuseοver="showDiv(event)">
    </div>
    <div style="width: 168px; height: 24px; background-color: #ffff66;" οnmοuseοver="showDiv(event)">
    </div>
    <div style="width: 168px; height: 24px; background-color: #ccff66;" οnmοuseοver="showDiv(event)">
    </div>
    <div style="width: 168px; height: 24px; background-color: #ffff66;" οnmοuseοver="showDiv(event)">
    </div>
    <div id="hidDiv" style="width: 238px; position: absolute; display: none; height: 120px;left: 228px; top: 22px; background-color: #ffcc33;">
    </div>
</body>
</html>

Cnami

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
随鼠标浮动的层，style.left属性赋值问题

今天需要做一个效果，当鼠标移动到一个图片上时，就显示一段文字介绍。需要用js操纵一个浮动的层。我很快按要求写好了，在IE下浏览一切正常，但是在firefox下却不行。浮动的层，怎么也动不起来。经过一番查找，终于找到原因：var o = document.getElementById("hidDiv"); //o.style.left = e.clientX;//这种赋值方法，IE下可以，在f
复制链接

扫一扫