福州seo|福建seo >> 福州SEO优化 >> 怎么让鼠标经过A标签的时候显示块状背景?

怎么让鼠标经过A标签的时候显示块状背景?

作者:SEO技术 分类: 福州SEO优化 发布于:2015-7-30 10:51 ė618次浏览 60条评论
也许有的朋友还没明白我说的是什么意思,就像你打开福建seo首页http://dongguan.seosrx.net/,当你的鼠标经过头部右侧的不同栏目的时候,会有一个绿色的背景显示出来(我这里用的是绿色,你可以根据自己喜好换其他颜色)
附上图:
002.jpg
这里有一个大家经常遇到的问题就是我虽然对a标签设定的宽和高,鼠标移到后,显示的还是文字本身的宽和高,没有所谓的北景出来,这是什么原因呢?
那是因为a标签是内联元素而不是块级元素,你在css上所设定的宽和高对它不起作用,所以这个时候你得用display:inline-block了,加上这个css命令后再加上width和height,那就可以把效果显示出来了。
现在清楚了吗?
附上我用的html和css,希望对大家有所帮助:
<div class="nav_right">
    <ul>
      <li><a href="http://dongguan.seosrx.net/" rel="nofollow">博客首页</a></li>
      <li><a href="http://dongguan.seosrx.net/knowledge/">SEO知识</a></li>
      <li><a href="http://dongguan.seosrx.net/course.html">SEO教程</a></li>
      <li><a href="http://dongguan.seosrx.net/website/">网站知识</a></li>
      <li><a href="http://dongguan.seosrx.net/tool/">常用工具</a></li>
      <li><a href="http://dongguan.seosrx.net/essay/">个人随笔</a></li>
      <li><a href="http://wpa.qq.com/msgrd?v=3&amp;uin=834321010&amp;site=qq&amp;menu=yes" rel="nofollow" target="_blank">联系阿军</a></li>
    </ul>
  </div>
.nav_right { line-height:60px; float:right;}
.nav_right li {float:left; font-size:16px; display:inline-block; width:90px; height:60px; text-align:center; padding-left:10px; }
.nav_right li a:hover { display:block; width:90px; height:60px; background-color:#99E5FF;}

本文出自 福州seo|福建seo,转载时请注明出处及相应链接。

分享本文至:

俗话说:SEO大神都喜欢发表自己的观点!那么你呢?

电子邮件地址不会被公开。必填项已用*标注


Ɣ回顶部