Home思洋影视事业部网站建设知识库
0 Comments

IE中中CSS伪类:hover的使用及其BUG(1)

发布于：2013-08-20  |   作者：广州网站建设  |   已聚集：人围观

本文和大家重点讨论一下CSS伪类:hover 在IE中使用及其BUG，伪类:hover是我们在CSS设计中最常运用的伪类之一，许多绚丽效果的实现离不开伪类:hover，比如我们常见的纯CSS菜单、相册效果等等。

CSS伪类:hover 在IE中使用及其BUG

伪类:hover是我们在CSS设计中最常运用的伪类之一，许多绚丽效果的实现离不开伪类:hover，比如我们常见的纯CSS菜单、相册效果等等。或许用了这么久的伪类:hover，还有部分朋友还不完全了解hover的规则：

◆在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。

◆在CSS2中此伪类可以应用于任何对象。

但目前IE5.5、IE6仅支持CSS1中的:hover，不过新出的IE7是支持CSS2中的:hover。
当我们用伪类:hover做某些特殊效果时，依据CSS2很好完成，但为了现在占据主流浏览器的IE6，我们又不得不做很多工作，比如给添加a元素等来模拟完成最终的效果。

或许这样讲太空洞，请看下面一个常见的触发显示的例子（仅选择IE6为例讲解）。

我们先用CSS2的写法来实现：

XHTML部分：

ExampleSourceCode



    
	
  1. 
		<ul> 
    2. 
	
  2. 
		<li>鼠标移过来触发我吧！<ahrefahref="#"title="">
    3. 
	
  3. 
		哈哈，终于被你发现了！</a></li> 
    4. 
	
  4. 
		</ul> 
    5. 
	
  5. 
		 
    6. 




	CSS部分：



	ExampleSourceCode




    
	
  1. 
		*{margin:0;padding:0;}  
    2. 
	
  2. 
		ul{list-style:none;margin:100px;}  
    3. 
	
  3. 
		li{height:100px;width:100px;background:#000;  
    4. 
	
  4. 
		font-size:12px;color:#fff;position:relative;}  
    5. 
	
  5. 
		lia{display:none;}  
    6. 
	
  6. 
		li:hovera{display:block;  
    7. 
	
  7. 
		text-decoration:none;width:100px;height:100px;  
    8. 
	
  8. 
		background:#c00;position:absolute;top:50px;
    9. 
	
  9. 
		left:50px;color:#fff;}  
    10. 
	
  10. 
		 
    11. 




	◆查看效果：



	SourceCodetoRun




    
	
  1. 
		<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
    2. 
	
  2. 
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    3. 
	
  3. 
		<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
    4. 
	
  4. 
		<head> 
    5. 
	
  5. 
		<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> 
    6. 
	
  6. 
		<title>css</title> 
    7. 
	
  7. 
		<styletypestyletype="text/css"> 
    8. 
	
  8. 
		ul{list-style:none;}  
    9. 
	
  9. 
		li{height:100px;width:100px;background:#000;  
    10. 
	
  10. 
		font-size:12px;color:#fff;position:relative;}  
    11. 
	
  11. 
		lia{display:none;}  
    12. 
	
  12. 
		li:hovera{display:block;text-decoration:none;width:100px;height:100px;background:#c00;  
    13. 
	
  13. 
		position:absolute;top:50px;left:50px;color:#fff;}  
    14. 
	
  14. 
		</style> 
    15. 
	
  15. 
		</head> 
    16. 
	
  16. 
		<body> 
    17. 
	
  17. 
		<h2>使用CSS2做出的效果</h2> 
    18. 
	
  18. 
		<ul> 
    19. 
	
  19. 
		<li>鼠标移过来触发我吧！<ahrefahref="#"title="">哈哈，终于被你发现了！</a></li> 
    20. 
	
  20. 
		</ul> 
    21. 
	
  21. 
		</body> 
    22. 
	
  22. 
		</html> 
    23. 
	
  23. 
		 
    24. 




	[可先修改部分代码再运行查看效果]

	广州网站建设,网站建设,广州网页设计,广州网站设计


			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机