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

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

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

大家可以测试发现在FF等对CSS2支持很好的浏览器中，可以显示我们所要达到的效果，但在IE6中却无法实现。

下面让我们换一种思维，所用CSS1的写法来看看，这个时候由于无法支持li元素:hover的使用，我们只好把所有文字包含到a中，对a使用:hover，并且将要显示隐藏的部分放到span元素中，首先我们对XHTML进行部分调整，调整如下：
广州网站建设,网站建设,广州网页设计,广州网站设计

XHTML部分：

ExampleSourceCode



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




	CSS中我们将a的设置成块级元素，并使a的大小和宽度和li的相同，并设置a为相对位置，用a来模拟上例中的li；而用span来模拟上例中的a，设置span在默认情况下隐藏（display:none;），当a被触发时（:hover），则span显示（display:block;）



	CSS部分：



	ExampleSourceCode 




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




	◆查看效果：



	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"
    6. 
	
  6. 
		content="text/html;charset=gb2312"/> 
    7. 
	
  7. 
		<title>css</title> 
    8. 
	
  8. 
		<styletypestyletype="text/css"> 
    9. 
	
  9. 
		ul{list-style:none;}  
    10. 
	
  10. 
		li{height:100px;width:100px;background:#000;font-size:12px;}  
    11. 
	
  11. 
		lia{display:block;height:100px;width:100px;position:relative;  
    12. 
	
  12. 
		color:#fff;text-decoration:none;}  
    13. 
	
  13. 
		lispan{display:none;}  
    14. 
	
  14. 
		lia:hoverspan{display:block;width:100px;height:100px;background:#c00;  
    15. 
	
  15. 
		position:absolute;top:50px;left:50px;color:#fff;}  
    16. 
	
  16. 
		</style> 
    17. 
	
  17. 
		</head> 
    18. 
	
  18. 
		<body> 
    19. 
	
  19. 
		<h2>使用CSS1做出的效果（有BUG）</h2> 
    20. 
	
  20. 
		<ul> 
    21. 
	
  21. 
		<li><ahrefahref="#"title="">鼠标移过来触发我吧！
    22. 
	
  22. 
		<span>哈哈，终于被你发现</span></a></li> 
    23. 
	
  23. 
		</ul> 
    24. 
	
  24. 
		</body> 
    25. 
	
  25. 
		</html> 
    26. 




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



	可我们发现上例中的效果，在IE6中依然无法显示，难道我们的代码写错了，可检查来检查去一点错误也没有（不信你找个高高手问问，他们依然会回答你，这代码完全正确），难道是标准中的说明是错的？还是IE6浏览器连CSS1也不支持？

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


			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机