当前位置：首页 → 问答吧 → 鼠标划过出现层问题

鼠标划过出现层问题

时间：2010-05-26

来源：互联网

因为参数内容是数据库循环数据，鼠标放每行上出现的层要正好在当前行上，有高手帮忙改下

<!DOCTYPE html PUBLIC ¨-//W3C//DTD XHTML 1.0 Transitional//EN¨ ¨http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd¨> <html xlmns=¨http://www.w3.org/1999/xhtml¨ lang=¨utf-8¨ > <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="content-language" content="zh-cn" /> <meta name="author" content="nclear,小桑,dan.friend" /> <meta name="copyright" content="小桑,nclear" /> <meta name="description" content="for more time i konw i fall in love whit she!" /> <title>分享</title> <style type="text/css">  </style> </head> <body> <div id="main"> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <div> <ul> <li><a href="blog" onMouseOver="document.all.dan1.style.display=''" onMouseOut="document.all.dan1.style.display='none'">参数内容1</a> <div id="dan1" style=" position:absolute; left:46%; top:24px;display:none; border:1px solid #060; width:190px; height:100px; background:#0C6; color:#000;"> <ul> <li class="guidemain_title">亮度：下拉框</li> <li>测试测试测1</li> <li>测试测试测1</li> <li>测试测试测1</li> <li>测试测试测1</li> </ul> </div></li> <li><a href="blog" title="功率：1000-2000w,1000-2000w,1000-2000w,1000-2000w" onMouseOver="document.all.dan2.style.display=''" onMouseOut="document.all.dan2.style.display='none'">参数内容2</a> <div id="dan2" style="position:absolute; left:46%; top:24px;display:none; border:1px solid #060; width:190; height:100px; background:#0C6; color:#000;"> <ul> <li class="guidemain_title">亮度：下拉框</li> <li>测试测试测2</li> <li>测试测试测2</li> <li>测试测试测2</li> <li>测试测试测2</li> </ul> </div></li> <li><a href="blog" onMouseOver="document.all.dan3.style.display=''" onMouseOut="document.all.dan3.style.display='none'">参数内容3</a> <div id="dan3" style="position:absolute; left:46%; top:24px;display:none; border:1px solid #060; width:190px; height:100px; background:#0C6; color:#000;"> <ul> <li class="guidemain_title">亮度：下拉框</li> <li>测试测试测3</li> <li>测试测试测3</li> <li>测试测试测3</li> <li>测试测试测3</li> </ul> </div></li> </ul> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: zhangbo1116 发布时间: 2010-05-26

样式自己调吧，给每个父层LI加个position:relative就可以了

<!DOCTYPE html PUBLIC ¨-//W3C//DTD XHTML 1.0 Transitional//EN¨ ¨http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd¨> <html xlmns=¨http://www.w3.org/1999/xhtml¨ lang=¨utf-8¨ > <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="content-language" content="zh-cn" /> <meta name="author" content="nclear,小桑,dan.friend" /> <meta name="copyright" content="小桑,nclear" /> <meta name="description" content="for more time i konw i fall in love whit she!" /> <title>分享</title> <style type="text/css">  </style> </head> <body> <div id="main"> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <div> <ul> <li style="position:relative; border:1px solid #000"><a href="blog" onMouseOver="document.all.dan1.style.display=''" onMouseOut="document.all.dan1.style.display='none'">参数内容1</a> <div id="dan1" style=" position:absolute; left:150px; top:0px;display:none; border:1px solid #060; width:190px; height:100px; background:#0C6; color:#000;"> <ul> <li class="guidemain_title">亮度：下拉框</li> <li>测试测试测1</li> <li>测试测试测1</li> <li>测试测试测1</li> <li>测试测试测1</li> </ul> </div></li> <li style="position:relative; border:1px solid #000"><a href="blog" title="功率：1000-2000w,1000-2000w,1000-2000w,1000-2000w" onMouseOver="document.all.dan2.style.display=''" onMouseOut="document.all.dan2.style.display='none'">参数内容2</a> <div id="dan2" style="position:absolute; left:150px; top:0px;display:none; border:1px solid #060; width:190; height:100px; background:#0C6; color:#000;"> <ul> <li class="guidemain_title">亮度：下拉框</li> <li>测试测试测2</li> <li>测试测试测2</li> <li>测试测试测2</li> <li>测试测试测2</li> </ul> </div></li> <li style="position:relative; border:1px solid #000"><a href="blog" onMouseOver="document.all.dan3.style.display=''" onMouseOut="document.all.dan3.style.display='none'">参数内容3</a> <div id="dan3" style="position:absolute; left:150px; top:0px;display:none; border:1px solid #060; width:190px; height:100px; background:#0C6; color:#000;"> <ul> <li class="guidemain_title">亮度：下拉框</li> <li>测试测试测3</li> <li>测试测试测3</li> <li>测试测试测3</li> <li>测试测试测3</li> </ul> </div></li> </ul> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: qxq864298 发布时间: 2010-05-26

非常感谢

作者: zhangbo1116 发布时间: 2010-05-27

鼠标划过出现层问题

热门阅读

热门下载