当前位置：首页 → 问答吧 → ie6下hover的伪类可以不加js来解决吗？

ie6下hover的伪类可以不加js来解决吗？

时间：2010-06-04

来源：互联网

<!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>Untitled 1</title> <style type="text/css"> body,ul,li,span,p,button,h2,img{padding:0;margin:0;border:0;} body{line-height:22px;font-size:12px;font-family:宋体;text-align:center;color:#fff;} li{list-style:none;} a{text-decoration:none;color:#fff;} .nav{margin:0 auto;width:500px;position:absolute;top:50%;left:50%;margin-left:-250px;} .nav_f li{display:inline;margin:0 5px;} .nav_f li a{border:1px solid red;padding:0px 5px;display:block;background:blue;} .nav_f li a:hover{border:1px solid fuchsia;padding:0px 5px;display:block;background:lime;color:maroon;} .nav_h{position:absolute;display:none;} .nav_h li a{border:1px solid aqua;padding:0px 5px;display:block;background:purple;width:200px;} .nav_h li a:hover{border:1px solid purple;padding:0px 5px;display:block;background:red;color:maroon;width:200px;} .nav_f li:hover ul{display:block;position:absolute;} </style> </head> <body> <div class="nav"> <ul class="nav_f"> <li style="float:left;"><a href="#">网站首页1</a> <ul class="nav_h"> <li><a href="#">网站首页1</a></li> <li><a href="#">网站首页1</a></li> <li><a href="#">网站首页1</a></li> <li><a href="#">网站首页1</a></li> <li><a href="#">网站首页1</a></li> </ul> </li> <li style="float:left;"><a href="#">网站首页1</a></li> <li style="float:left;"><a href="#">网站首页1</a></li> <li style="float:left;"><a href="#">网站首页1</a></li> <li style="float:left;"><a href="#">网站首页1</a></li> </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: wangjin327 发布时间: 2010-06-04

A标签的话, 可以不加JS

作者: 4321285 发布时间: 2010-06-04

IE6下只有A可以使用

作者: iaw2001200 发布时间: 2010-06-04

我想做一个下拉菜单，为什么在ie6下面出不来啊？

作者: wangjin327 发布时间: 2010-06-07

IE6仅支持拥有href属性的A标签的hover这个伪类，其它标签如要使用，需要JS来弥补。

作者: yoom 发布时间: 2010-06-07

<!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>无标题 1</title> <style type="text/css" > body{ margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;font-family:\5B8B\4F53,Arial Narrow,arial,serif;font-size:12px;color:#000;background:#fff;padding-top:100px; } *{ margin:0;padding:0; } a:link,a:visited,a:hover,a:active{ color:#fff;text-decoration:none; } ul,li,ol{ list-style:none; } h1,h2,h3,h4,h5,h6{ font-size:100%; } .menu{ margin:0 auto;width:200px;height:25px;line-height:25px;position:relative;background:#0000FF;border:1px #FF0000 solid;color:#fff;text-align:center;cursor:pointer; } .nav{ display:none;width:200px;position:absolute;left:-1px;top:25px;background:#0000FF;border:1px #FF0000 solid;border-top:0;padding-bottom:20px; } .nav li{ margin:0 auto;width:180px;height:30px;line-height:30px;overflow:hidden;border-bottom:1px #fff dashed; } .nav li a{ } .navshow{ z-index:999; } .navshow div{ display:block; } </style> </head> <body> <div class="menu" onmouseover="this.className='menu navshow'" onmouseout="this.className='menu'" > <h2><a href="#">网站首页1</a></h2> <div class="nav"> <ul> <li><a href="#">导航一</a></li> <li><a href="#">导航二</a></li> </ul> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

一个思路~~~~~~

作者: weballan 发布时间: 2010-06-07

ie6下hover的伪类可以不加js来解决吗？

热门阅读

热门下载