CSS中a:hover在浏览器中无法显示

最新推荐文章于 2021-12-22 14:39:49 发布

vivi_csdn

最新推荐文章于 2021-12-22 14:39:49 发布

阅读量1.2k

点赞数 2

本文链接：https://blog.csdn.net/vivi_csdn/article/details/46279709

版权

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">用HTML和CSS做背景图片定位的静态页面 </span>

此行代码一直不起作用，

#h a:hover{background:transparent url(bg.gif) 0 -55px no-repeat;}

发现要将display设为block;

正确代码如下

html：

<span style="font-size:24px;"><!doctype html>
 <head>
  <link rel="stylesheet" type="text/css" href="text2.css">
 </head>
 <body>
  <ul>
  <li id="h"><a href="#">HTML</a></li>
  <li id="b"><a href="#">Javascript</a></li>
  <li id="s"><a href="#">ServerSide</a></li>
  <li id="d"><a href="#">ASP.NET</a></li>
  <li id="x"><a href="#">XML</a></li>
  <li id="m"><a href="#">Web Services</a></li>
  <li id="w"><a href="#">Web Building</a></li>
  </ul>
 </body>
</html></span>

css:

ul{
	height:55px;
	width:1125px;
	margin:0;
	padding:0;
	background:transparent url(bg.gif) 0 0 no-repeat;
}

li
{	
	float:left;
	text-indent:-9999px;
}
li a{
	display:block;
	height:55px;
	}

#h	{left:0px;width:155px;}
#b	{left:155px;width:157px;}
#s	{left:312px;width:167px;}
#d 	{left:479px;width:158px;}
#x	{left:637px;width:101px;}
#m	{left:738px;width:185px;}
#w	{left:923px;width:177px;}

#h a:hover{background:transparent url(bg.gif) 0 -55px no-repeat;}
#b a:hover{background:transparent url(bg.gif) -155px -55px no-repeat;}
#s a:hover{background:transparent url(bg.gif) -312px -55px no-repeat;}
#d a:hover{background:transparent url(bg.gif) -479px -55px no-repeat;}
#x a:hover{background:transparent url(bg.gif) -637px -55px no-repeat;}
#m a:hover{background:transparent url(bg.gif) -738px -55px no-repeat;}
#w a:hover{background:transparent url(bg.gif) -923px -55px no-repeat;}

下面是bg.gif图片