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

来源:互联网 发布:手机怎么清除用户数据 编辑:程序博客网 时间:2024/05/16 02:31

<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图片


0 0
原创粉丝点击