热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

css3中,:hover不仅仅可以用在a元素,已经扩展到绝大多数的标签,然而ie6以下浏览器不支持这种特性,今天看下如何做到兼容:<!DOCTYPEhtmlPUBLIC-
css3中,:hover不仅仅可以用在a元素,已经扩展到绝大多数的标签,然而ie6以下浏览器不支持这种特性,今天看下如何做到兼容: "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实现。

推荐阅读
author-avatar
长春搜房-杨志玲
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有