伪类hover和active的应用

ie对css2的伪类的支持是:除了a以外其他对象都没用
除了ie外,其他浏览器都支持css2的标准,任何对象都可以使用伪类(hover,active)

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   
  2.     "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">  
  3.   
  4. <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>>  
  5. <head>  
  6. <title>active</title>  
  7. <style type="text/css">  
  8.   
  9. body {   
  10.     font: 85%/140% arial, helvetica, sans-serif;   
  11. }   
  12. p{   
  13.     color: #333;   
  14.     background: #DDD;   
  15.     padding: 10px;   
  16. }   
  17.   
  18. p:hover, p.sfhover {   
  19.     color: red;   
  20.     background: #F5F5F5;       
  21. }   
  22.   
  23. p:active, p.sfactive {   
  24.     color: #369;   
  25.     background: #EEE;   
  26. }   
  27. </style>  
  28.   
  29. <script type="text/javascript"><!--//--><![CDATA[//><!--  
  30.  
  31. function suckerfish(type, tag, parentId) {  
  32.     if (window.attachEvent) {  
  33.         window.attachEvent("onload", function() {  
  34.             var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById  
  35.  
  36. (parentId).getElementsByTagName(tag);  
  37.             type(sfEls);  
  38.         });  
  39.     }  
  40. }  
  41. sfHover = function(sfEls) {  
  42.     for (var i=0; i<sfEls.length; i++) {  
  43.         sfEls[i].onmouseover=function() {  
  44.             this.className+=" sfhover";  
  45.         }  
  46.         sfEls[i].onmouseout=function() {  
  47.             this.className=this.className.replace(new RegExp(" sfhover\\b"), "");  
  48.         }  
  49.     }  
  50. }  
  51. sfActive = function(sfEls) {  
  52.     for (var i=0; i<sfEls.length; i++) {  
  53.         sfEls[i].onmousedown=function() {  
  54.             this.className+=" sfactive";  
  55.         }  
  56.         sfEls[i].onmouseup=function() {  
  57.             this.className=this.className.replace(new RegExp(" sfactive\\b"), "");  
  58.         }  
  59.     }  
  60. }  
  61.  
  62. suckerfish(sfHover, "p");  
  63. suckerfish(sfActive, "P");  
  64.  
  65. //--><!]]></script>  
  66.   
  67. </head>  
  68.   
  69. <body>  
  70.   
  71. <P>很多年来,每发行一个新版本,浏览器制作者们都扩展了对 CSS 的支持。今天,Internet Explorer 6、Netscape Navigator    
  72. 7、Mozilla、Opera 和 Safari 都全面支持 CSS。但这并不意味着我们作为 Web 设计者和开发者的生涯不存在问题。尽管上述所有浏览器都支   
  73.   
  74. 持    
  75. CSS Level    
  76. 2,它们的兼容程度仍然各不相同。而且在某些情况下,特定属性仍然会带给你很多麻烦。也就是说,您仍然需要遵守老的信条“<em>测试再测   
  77.   
  78. </em>”。但如果您坚持使用 CSS    
  79. 规范的核心属性,您将能够正确地呈现页面。</P>  
  80.   
  81. </body>  
  82. </html>  

1条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

😉😐😡😈🙂😯🙁🙄😛😳😮:mrgreen:😆💡😀👿😥😎😕