边框CSS / HTML

Question

我的网页的CSS有问题。 基本上，我想这样做，以便当您将鼠标悬停在导航栏中的链接之一上时，它会在其周围放置边框。 所以，这就是我所做的：

     a
     {
       text-align: center;
       font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;;
       font-size: 20px;
       font-weight: bold;
       color: #4096ee;
       text-decoration: none;
       postion: absolute;
     }
     a:visited
      {
        font-weight: bold;
        color: #4096ee;
        text-decoration: none;
      }
     a:hover
     {
     font-weight: bold;
     border-radius: 5px;
     color: #4096ee;
     padding: 4px;
     border: solid 2px;
     border-color: #303030;
     text-decoration: none;
     }
     a:active
     {
     font-weight: bold;
     color: white;
     text-decoration: none;
     }

然后我在同一行上有4个链接，它们之间有4个＆emsp。 现在，每当我将鼠标悬停在一个链接上时，就会出现边框，但它会轻推其他链接以为边框腾出空间。 有什么办法可以阻止这种情况的发生？

Answer 1

为什么不在项目上加上边框并使其与背景颜色相同，而只是在悬停时更改颜色

Answer 2

尝试将box-sizing : border-box到CSS中。 这将使边框进入元素内部。

Answer 3

像这样更改您的CSS：

     a
     {
       text-align: center;
       font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;;
       font-size: 20px;
       font-weight: bold;
       color: #4096ee;
       text-decoration: none;
       postion: absolute;
       border-radius: 5px;
       padding: 4px;
       border-color: transparent;
     }

这样就不会碰到任何东西。

Answer 4

您可以在常规链接中添加填充。 悬停状态将覆盖常规填充并添加边框。

a {
    text-align: center;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;;
    font-size: 20px;
    font-weight: bold;
    color: #4096ee;
    text-decoration: none;
    padding: 6px;
    postion: absolute;
}

http://jsfiddle.net/5dQL5/

Answer 5

   a{
       text-align: center;
       font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;;
       font-size: 20px;
       font-weight: bold;
       color: #4096ee;
       text-decoration: none;
       postion: absolute;
       border: 2px solid transparent;
     }

只需添加一个宽度相同的边框（在您的情况下为2px），但使其透明即可。

Answer 6

向anchor标记添加默认的2px border ，但使其tranparent 。 因此，在页面加载时，它将在第一时间不可见。 然后，当您悬停任何锚标记时，将border-color更改为#303030

试试这个代码

a{ 
  border: 2px solid transparent;
}
a:hover{
  border-color: #303030;
}