1. 爱易网页
  2. HTML教程
  3. div:hover在IE浏览器下失效的有关问题，求解决方案，附源代码

div:hover在IE浏览器下失效的有关问题，求解决方案，附源代码

日期：2014-05-17　 浏览次数：20588 次

div:hover在IE浏览器下失效的问题，求解决方案，附源代码。
在遨游、Chrome浏览器都可以，就是IE浏览器不可以(IE9)，用IETESTER的各个版本IE也不行。下面是代码（只是一个导航）：
HTML code

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>新实验</title>
        <style type="text/css">        
/*nav*/
#navBox{
  width:959px;
  height:30px;
  margin:0 auto;
  background-color:#EEEEEE;
  border:1px solid #DDDDDD;
}
#navul{
    list-style-type:none;
}
.navmenu{
    margin-left:0px;
  cursor:pointer;
    float:left;
    width:150px;
    height:30px;
    line-height:30px;
    text-align:center;
    background-color:#CD950C;
  border-top:1px solid #DDDDDD;
  border-bottom:1px solid #DDDDDD;
}
.navmenu:hover{
    background-color:#A0522D;
    border:1px solid #8B4513;
}
ul{
    margin-left:0px;
    padding-left:0px;
    margin-top:0px;
}
li{
    float:left;
}
/*footer*/
#footer{
    margin:0 auto;
    margin-bottom:0px;
    width:959px;
    height:100;
    border:1px solid #DDDDDD;
}
#footerul{
    list-style-type:none;
}

        </style>
    </head>
    <body>
        <div id="navBox">
            <ul id="navul">
                <li>
                    <div class="navMenu" >
                    Home
                  </div>
              </li>
                <li>
                    <div class="navMenu">
                    Portfolio
                  </div>
                    </li>
                <li>
                    <div class="navMenu">
                    Blank
                </div>
                    </li>
                <li>
                    <div class="navMenu">
                    Guestbook
                    </div>
                    </li>
                <li>
                    <div class="navMenu">
                    About
                    </div>
                    </li>
            </ul>            
        </div>
        <div id="footer">
            <dt id="footerul">
                <dd>
                  <div>这是一个还未完成的网站</div>
                </dd>
            </dt>
            
        </div>
    </body>
</html>


知道的讨论下解决方法。

------解决方案--------------------
你没发现div 的效果已经被li的效果覆盖了嘛。。
------解决方案--------------------
<div class="navMenu" >
Home
</div>
这个你写成<a href="#">home</a>
li a:hover{ background:#000; border:1px solid #fff;}
 这样可以！！
------解决方案--------------------
朋友，你的li能不能用在DIV里面，而不要把DIV內镶到li里面。
个人推荐，供参考。欢迎回访
------解决方案--------------------
用js

相关资料更多>

  1. 请教如何定义某个td内文字的行高
  2. 写了一个html的网页 嵌入了一些JavaScript的代码 但是实现不了功能呀 咋回事呢 那些JavaScript代码 小弟我就很郁闷了 那些JavaScri
  3. HTML5 CSS3 脚本库小结
  4. HTML Table TR TD 边距有关问题
  5. IE6下图片和文字在DIV中垂直居中对齐的有关问题
  6. CSS Layout Properties 格局属性
  7. 一个CSS图片显示的有关问题，一直卡在这了
  8. Velocity引擎渲染html格式邮件模版乱码有关问题
  9. 关于图像的有关问题