html – CSS – 悬停时文本移动

前端之家收集整理的这篇文章主要介绍了html – CSS – 悬停时文本移动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我现在已经在这里待了大约一个小时,似乎无法抓住它.
每当我将鼠标悬停在此文本上时(我想为其悬停一个背景颜色),文本会随着bgcolor一起移动.
这是我得到的:

  1. #innerheader ul {
  2. list-style:none;
  3. margin:0;
  4. padding:0;
  5. }
  6. #innerheader li {
  7. display:block;
  8. float:left;
  9. height:25px;
  10. margin:0 2px;
  11. padding:15px 10px 0 10px;
  12. color:#FFFFFF;
  13. font-weight:bold;
  14. font-size:10px;
  15. text-transform:uppercase;
  16. }
  17. #innerheader li a,#innerheader li a:link,#innerheader li a:visited,#innerheader li a:active {
  18. color:#FFFFFF;
  19. text-decoration:none;
  20. }
  21. #innerheader li a:hover {
  22. background-color: blue;
  23. padding: 10px 10px 10px 10px
  24. }
最佳答案
删除悬停声明中的填充.或者只是在悬停状态之前将填充移动到锚点,如下面的代码所示.

文本移动的原因是锚点上没有填充,然后当你悬停时,就会出现填充.

  1. #innerheader li a,#innerheader li a:active {
  2. color:#FFFFFF;
  3. text-decoration:none;
  4. padding: 10px;
  5. }
  6. #innerheader li a:hover {
  7. background-color: blue;
  8. }

猜你在找的HTML相关文章