简单的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隐藏部分”覆盖掉。)
...全文
2238 6 打赏 收藏 转发到动态 举报
AI 作业
写回复
用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>   
    
FFDDRR 2016-01-27
  • 打赏
  • 举报
回复
div容器宽度不够,换行显示,但容器只有20px的高度,下面的容器只偏离上个容器20px;但你的文字换行了,相当于有40px,肯定要遮住撒; 解决办法:1、不设定宽度;2、设置足够的宽度。3。为了灵活,设置pandding,不设置具体宽度

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧