li标签用到hover，在ie浏览器不兼容

最近弄网站的新闻模块，新闻的列表用到了ul列表。为每个li添加了background，然后添加hover事件：background改变。代码如下：

HTML code

<li>
        <a href="news_show<? echo $row['id'];?>.html" class="news_tit"><?php echo $row['news_title']; ?></a>
        <span><?php echo $row['news_time']; ?></span>
        <p><?php 
           $str=$row['news_content']; 
           $str=preg_replace('/<img (.*) \/>/i','',$str);
           $str=preg_replace('/<p[^>]*>/i','',$str);
           $str=preg_replace('/<\/p>/i','',$str);
           $str = preg_replace ( "/<a[^>]*>/i", "", $str );
           $str = preg_replace ( "/<\/a>/i", "", $str );
           $str = preg_replace ( "/<span[^>]*>/i", "", $str );
           $str = preg_replace ( "/<\/span>/i", "", $str );
           if(iconv_strlen($str,'utf-8')<120)
              {
                  echo $str;
              }else{
                  echo iconv_substr($str, 0,120,'UTF-8').'...';
              }
              
             ?></p>
         <a href="news_show<? echo $row['id'];?>.html" class="right">查看更多>></a>
         <div class="clear"></div>
        
       </li>

CSS code

.news_right ul{margin-bottom:20px;}
.news_right ul li{background:#f7f7f7; margin-bottom:3px; line-height:1.8em; position:relative; padding:15px; margin-right:20px; }
.news_right ul li:hover{background:#ededed;}
.news_right ul li a.news_tit,.news_right ul li span{color:#d94343; font-size:14px; margin-bottom:5px;}
.news_right ul li span{position:absolute; right:15px; top:15px;}
.news_right ul li p{text-indent:2em;}

效果如下：

在chrome、ff中的显示效果没问题，但是在ie浏览器中，当鼠标滑动到p标签附近时背景会再次发生变化，开始以为是p标签挡住了li标签，使得li的hover属性失效，于是想到了JQ的mouseenter跟mouseleave方法，但是用了之后还是发现没用，经过多次试验，原来只需要在li标签上加多个高度就可以解决了。。。真是无语，原来就那么简单！！

css code：

.news_right ul{margin-bottom:20px;}
.news_right ul li{background:#f7f7f7; margin-bottom:3px; line-height:1.8em; position:relative; padding:15px; margin-right:20px; height:110px;}
.news_right ul li:hover{background:#ededed;}
.news_right ul li a.news_tit,.news_right ul li span{color:#d94343; font-size:14px; margin-bottom:5px;}
.news_right ul li span{position:absolute; right:15px; top:15px;}
.news_right ul li p{text-indent:2em;}

当然，这样还不行，在ie6中，只支持a:hover，那怎么解决li:hover在ie6中也有效呢？采用onmouseover 和 onmouseout 来代替A的鼠标经过样式，这样就可以能LI随便加个CLASS样子加上就可以了。最终的代码如下：

<li onmouseover="this.className='this_over'" onmouseout="this.className='this_out'">
        <a href="news_show<? echo $row['id'];?>.html" class="news_tit"><?php echo $row['news_title']; ?></a>
        <span><?php echo $row['news_time']; ?></span>
        <p><?php 
           $str=$row['news_content']; 
           $str=preg_replace('/<img (.*) \/>/i','',$str);
           $str=preg_replace('/<p[^>]*>/i','',$str);
           $str=preg_replace('/<\/p>/i','',$str);
           $str = preg_replace ( "/<a[^>]*>/i", "", $str );
           $str = preg_replace ( "/<\/a>/i", "", $str );
           $str = preg_replace ( "/<span[^>]*>/i", "", $str );
           $str = preg_replace ( "/<\/span>/i", "", $str );
           if(iconv_strlen($str,'utf-8')<120)
              {
                  echo $str;
              }else{
                  echo iconv_substr($str, 0,120,'UTF-8').'...';
              }
              
             ?></p>
         <a href="news_show<? echo $row['id'];?>.html" class="right">查看更多>></a>
         <div class="clear"></div>
        
       </li>

css code：

.news_right ul{margin-bottom:20px;}
.news_right ul li{background:#f7f7f7; margin-bottom:3px; line-height:1.8em; position:relative; padding:15px; margin-right:20px; height:110px;}
.news_right ul li.this_over{background:#ededed;}
.news_right ul li.this_out{background:#f7f7f7;}
.news_right ul li a.news_tit,.news_right ul li span{color:#d94343; font-size:14px; margin-bottom:5px;}
.news_right ul li span{position:absolute; right:15px; top:15px;}
.news_right ul li p{text-indent:2em;}

这样，这个新闻模块就兼容了现在流行的浏览器。