简单的JS鼠标移入移出的时候，文字显示与隐藏的问题

day_moon 2016-01-27 05:41:30

页面代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function m_over(mmObj) {
var mSubObj = mmObj.getElementsByTagName("div")[0];
mSubObj.style.display = "block";
mSubObj.style.backgroundColor = "#BEBEBE";
}
function m_out(mmObj) {
var mSubObj = mmObj.getElementsByTagName("div")[0];
mSubObj.style.display = "none";

}
</script>

</head>

<body>
<div onmouseover="m_over(this)" onmouseout="m_out(this)" style="width:50px;position:relative;">1显示部分

<div style="width:50px;height:20px;display:none;position:absolute;margin:0px;padding:0px;">
<a href="1.html">1隐藏部分</a>
</div>

<div onmouseover="m_over(this)" onmouseout="m_out(this)" style="width:50px;position:relative;">2显示部分

<div style="width:50px;height:20px;display:none;position:absolute;margin:0px;padding:0px;">
<a href="1.html">2隐藏部分</a>
</div>

</div>
</body>
</html>
问题：鼠标移入“1显示部分”时候，“1隐藏部分”覆盖掉“2显示部分”。我想要的效果：鼠标移入时候，“1隐藏部分”显示出来，“2显示部分”向下移动(不要被“1隐藏部分”覆盖掉。)

...全文

2132 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

day_moon 2016-01-28

打赏
举报

谢谢杨小事er

杨小事er 2016-01-28

打赏
举报

引用 4 楼 day_moon 的回复:

1楼谢谢你的回答，2楼你回答正确。2#我想问，我的页面出现这样的问题是的原因是什么？（本人真心不懂求解答）回答后立马给分。

因为你用的是绝对定位，隐藏的部分显示出来的时候并没有影响其他地方的定位，所以2显示部分就没动

day_moon 2016-01-28

打赏
举报

1楼谢谢你的回答，2楼你回答正确。2#我想问，我的页面出现这样的问题是的原因是什么？（本人真心不懂求解答）回答后立马给分。

天际的海浪 2016-01-27

打赏
举报


<div onmouseover="m_over(this)" onmouseout="m_out(this)" style="width:50px;">1显示部分
    <div style="width:50px;height:20px;display:none;margin:0px;padding:0px;">
        <a href="1.html">1隐藏部分</a>
    </div>
</div>
<div onmouseover="m_over(this)" onmouseout="m_out(this)" style="width:50px;">2显示部分
    <div style="width:50px;height:20px;display:none;margin:0px;padding:0px;">
        <a href="1.html">2隐藏部分</a>
    </div>   
</div>

天际的海浪 2016-01-27

打赏
举报


<div onmouseover="m_over(this)" onmouseout="m_out(this)" style="width:50px;">1显示部分
    <div style="width:50px;display:none;margin:0px;padding:0px;">
        <a href="1.html">1隐藏部分</a>
    </div>
</div>
<div onmouseover="m_over(this)" onmouseout="m_out(this)" style="width:50px;">2显示部分
    <div style="width:50px;display:none;margin:0px;padding:0px;">
        <a href="1.html">2隐藏部分</a>
    </div>   
</div>