为a以外的元素使用:hover伪类-CSDN博客

css3中，:hover不仅仅可以用在a元素，已经扩展到绝大多数的标签，然而ie6以下浏览器不支持这种特性，今天看下如何做到兼容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gbk" />
< title >例子a以为的元素使用CSS3中的:hover伪类 </title>
< style type ="text/css" >
ul
{
  margin:0;
  padding:0;
  list-style-type:none;
}
#ulist
{
  font-size:14px;
  line-height:1.5em;
  border-top:3px solid #119DBB;
  width:15em;
  margin:0 auto;
}
#ulist li
{
  background-color:#C9F1FA;
  cursor:pointer;
  padding-left:10px;
}
#ulist li:hover,#ulist .li_hover
{
  background-color:#FFF;
  border-top:1px dotted #14ADCD;
  border-bottom:1px dotted #14ADCD;
  _border-top-style:solid;
  _border-bottom-style:solid;
}
</style>
< !--[if IE 6] >
< script type ="text/javascript" src ="jquery.js" > </script>
< script type ="text/javascript" >
$(document).ready(function(){
  $("#ulist>li").each(function(){
    $(this).mouseover(function(){
      $(this).addClass('li_hover');
    }).mouseout(function(){
      $(this).removeClass('li_hover');
    });
  });
});
</script>
< ![endif]-- >
</head>

< body >
   < ul id ="ulist" >
     < li >这是一段测试用的文本 </li>
     < li >这是一段测试用的文本 </li>
     < li >这是一段测试用的文本 </li>
     < li >这是一段测试用的文本 </li>
     < li >这是一段测试用的文本 </li>
     < li >这是一段测试用的文本 </li>
   </ul>
</body>
</html>

对ie6- 采用js实现。

本文转自 xcf007 51CTO博客，原文链接：http://blog.51cto.com/xcf007/143590 ，如需转载请自行联系原作者