邊框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;
}