您的位置：首页 > 其它

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

2008-05-29 18:39 239 查看

今天需要做一个效果，当鼠标移动到一个图片上时，就显示一段文字介绍。需要用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;" onmouseover="showDiv(event)">
</div>
<div style="width: 168px; height: 24px; background-color: #ccff66;" onmouseover="showDiv(event)">
</div>
<div style="width: 168px; height: 24px; background-color: #ffff66;" onmouseover="showDiv(event)">
</div>
<div style="width: 168px; height: 24px; background-color: #ccff66;" onmouseover="showDiv(event)">
</div>
<div style="width: 168px; height: 24px; background-color: #ffff66;" onmouseover="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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航