为a以外的元素使用:hover伪类

最新推荐文章于 2022-07-12 20:04:40 发布

weixin_33895657

最新推荐文章于 2022-07-12 20:04:40 发布

阅读量455

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript ViewUI

原文链接：https://yq.aliyun.com/articles/425501

本文介绍了一种让CSS3中的:hover伪类在IE6等旧版浏览器上也能正常工作的方法。通过使用jQuery为列表项添加和移除特定类的方式，实现了当鼠标悬停时改变背景颜色的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

</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，如需转载请自行联系原作者