给a标签加上的背景图片在给a标签设置hover在动到a标签区域时背景图片被隐藏的问题。 财富值12

2016-10-15 15:05发布

<!doctype html> <html lang="en">  <head>   <meta charset="UTF-8">   <meta name="Generator" content="EditPlus®">   <meta name="Author" content="">   <meta name="Keywords" content="">   <meta name="Description" content="">   <title>Document</title>   <style>     *{margin:0; padding:0;}     body{font-size:14px;}     ul{list-style:none;}     .dh{width:953px; height:38px; border:1px solid green; border-top:1px solid #ccc; margin:150px auto 0;}     .dh li{float:left; width:105px; line-height:38px; text-align:center; border-right:1px dotted red;}     .dh li a{text-decoration:none; display:block; color:#333; background: url(360.png) no-repeat 10px 10px;}     .dh li a:hover{background:#ccc;}     li.abc{border-right:none;}   </style>  </head>  <body>     <div class="dh">         <ul>             <li class="item1"><a href="#">推荐网站</a></li>             <li class="item2"><a href="#">新闻头条</a></li>             <li class="item3"><a href="#">电 视 剧</a></li>             <li class="item4"><a href="#">最新电影</a></li>             <li class="item5"><a href="#">小 游 戏</a></li>             <li class="item6"><a href="#">小说大全</a></li>             <li class="item7"><a href="#">旅游度假</a></li>             <li class="item8"><a href="#">网上购物</a></li>             <li class="abc"><a href="#">好药特惠</a></li>         </ul>     </div>  </body> </html>


友情提示: 此问题已得到解决,问题已经关闭,关闭后问题禁止继续编辑,回答。
该问题目前已经被作者或者管理员关闭, 无法添加新回复
2条回答
mishen - whatsns产品经理
1楼-- · 2016-10-15 14:52

a:hover把你原先的background图片覆盖了,你应该用li:hover。至于后面那个间隙问题应该是浏览器的兼容问题,你把父元素dh的宽度去掉让它自适应就可以了。

hover 了之后,标签a就有了两个background 数据,根据优先级,它会选择:hover下的background。简单说:背景不是被覆盖,而是被换掉了。