61,112
社区成员
发帖
与我相关
我的任务
分享搞不懂了的问题！
<!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=gb2312" />
<title>无标题文档</title>
</head>
<body>
<style type="text/css">
#main{
z-index:10;}
#main h3{list-style:none;}
#main div{position:absolute;display:none; z-index:0;}
#main h3 a{ text-decoration:none; position:relative; display:block;}
#main h3 a div{display:none;}
#main h3 a:hover{ visibility:visible; }
#main h3 a:hover div{position:absolute; background-color:#F5B392; left:40px; top:20px; display:block; width:492px; height:180px; overflow:hidden; margin-top:0px;z-index:10000;}
</style>
<div id="main">
<h3 id="post-16"><a href="#" rel="bookmark">22222<div>
22222
<p>22222</p>
<p>22222</p>
<p>22222</p>
<p>22222</p>
<p>22222</p>
<p>22222</p>
<p>22222</p>
</div></a></h3>
</div>
</div>
<div id="main" style="z-index:10;">
<h3 id="post-13"><a href="#" rel="bookmark">11111<div>
11111
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
</div></a></h3>
</div>
</div>
</body>
</html>
现在的效果
当鼠标移动到22222后弹出div提示详细信息，当鼠标移动到div上面后，div的display属性还是block，但是当鼠标顺着div忘下面移动的时候到11111这一行时，就弹出11111的信息了。
希望实现当鼠标移动到11111这一行时还是22222的信息，一直到当鼠标移动到222222的div外面时222222的信息才消失。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<style type="text/css">
#main{
z-index:10;}
#main h3{list-style:none;}
#main div{position:absolute;display:none; z-index:0;}
#main h3 a{ text-decoration:none; position:relative; display:block;}
#main h3 a div{display:none;}
#main h3 a:hover{ visibility:visible; }
#main h3 a:hover div{position:absolute; background-color:#F5B392; left:40px; top:20px; display:block; width:492px; height:180px; overflow:hidden; margin-top:0px;z-index:10000;}
</style>
<div id="main">
<h3 id="post-16"><a href="#" rel="bookmark">22222<div>
22222
<p>22222</p>
<p>22222</p>
<p>22222</p>
<p>22222</p>
<p>22222</p>
<p>22222</p>
<p>22222</p>
</div></a></h3>
</div>
</div>
<div id="main" style="z-index:10;">
<h3 id="post-13"><a href="#" rel="bookmark">11111<div>
11111
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
</div></a></h3>
</div>
</div>
</body>
</html>
现在的效果
当鼠标移动到22222后弹出div提示详细信息，当鼠标移动到div上面后，div的display属性还是block，但是当鼠标顺着div忘下面移动的时候到11111这一行时，就弹出11111的信息了。
希望实现当鼠标移动到11111这一行时还是22222的信息，一直到当鼠标移动到222222的div外面时222222的信息才消失。
...全文
请发表友善的回复…
发表回复
天下如山 2009-07-04
- 打赏
- 举报
[Quote=引用 2 楼 toury 的回复:]
id应该是唯一的。你的22222、11111两个DIV取的id都是main,本身就有问题
[/Quote]
改下吧，然后再用DOM 控制层的显示，还是隐藏。
id应该是唯一的。你的22222、11111两个DIV取的id都是main,本身就有问题
[/Quote]
改下吧，然后再用DOM 控制层的显示，还是隐藏。
howardhewang 2009-07-04
- 打赏
- 举报
将id="main"都改为class="main"吧,
再用.main{}
再用.main{}
howardhewang 2009-07-04
- 打赏
- 举报
问题太大了
呵呵
呵呵
toury 2009-07-04
- 打赏
- 举报
id应该是唯一的。你的22222、11111两个DIV取的id都是main,本身就有问题
shenzhenNBA 2009-07-04
- 打赏
- 举报
<div id="main">
<h3 id="post-16"> <a href="#" rel="bookmark">22222
<div onmouseover="this.display='block';" onmouseout="this.display='none';">
22222
<p>22222 </p>
<p>22222 </p>
<p>22222 </p>
<p>22222 </p>
<p>22222 </p>
<p>22222 </p>
<p>22222 </p>
</div> </a>
</h3>
</div>
</div>
试看...，其他的类似的修改
<h3 id="post-16"> <a href="#" rel="bookmark">22222
<div onmouseover="this.display='block';" onmouseout="this.display='none';">
22222
<p>22222 </p>
<p>22222 </p>
<p>22222 </p>
<p>22222 </p>
<p>22222 </p>
<p>22222 </p>
<p>22222 </p>
</div> </a>
</h3>
</div>
</div>
试看...，其他的类似的修改
