鏈接在CSS中懸停移動到右側？

我正在設置導航鏈接的樣式，當我將鼠標懸停在鏈接上時，它會更改顏色，但它會在右側移動幾個像素，並在光標從懸停中移除時再次變爲正常。鏈接在CSS中懸停移動到右側？

我的導航CSS

.logo-wrapper { 
    padding-bottom: 85px; 
    background-color: #2e3639; 

} 

.logo-items{ 
    display: inline-block; 
    position: relative; 
    color: white; 
    font: "Times New Roman"; 
    float: left; 
    margin-left: 500px; 
    margin-top: 30px; 
    text-decoration: none; 

} 

.logo-items a{ 
    text-decoration: none; 
    color: white; 
    margin-left: 10px; 
    margin-right: 10px; 
    border-bottom:solid 1px transparent; 
} 

.logo-items a:hover { 
    background-color: #61696c; 
    padding: 4px 4px 4px 4px; 
    border-radius: 10px; 
} 

.logo-items span { 
    margin-right: 10px; 
}

我的導航

<div class="logo-wrapper"> 
       <div class="logo-items"> 
        <span>Logo</span> 
        <span> 
        <%= link_to "Tags", tags_path %> 
        </span> 
        <span>Pages</span> 

       </div> 
      </div>

來源

2013-10-02 ajkumar25

嗯......你的'.logo-items a：hover'上有一個'padding'規則，塞萊構造函數。你是不是把它放在選擇符上而沒有'：hover'？ – ajp15243

您必須將'padding：4px;'（只有一個值已足夠，因爲所有值都是相同的）也放到'.logo-items a'中。 – Harry

請張貼小提琴，這有助於追蹤真實問題。爲什麼你把'padding：'放到'：hover'css中？ –

嘿，你得到這個，因爲你已經添加填充到你的：懸停來獲得你的灰色背景效果。

.logo-items a:hover { 
    background-color: #61696c; 
    padding: 4px 4px 4px 4px; 
    border-radius: 10px; 
}

一個快速的方式來阻止將跳轉到填充添加到您的鏈接擺在首位，因此寬度八方通相同

.logo-items a{ 
    text-decoration: none; 
    color: white; 
    margin-left: 10px; 
    margin-right: 10px; 
    border-bottom:solid 1px transparent; 
    padding:4px; 
}

香港專業教育學院增加了一個小提琴這裏http://jsfiddle.net/domjgreen/uNKm8/

來源

2013-10-02 14:25:21

試着這樣做： -

添加「padding: 4px 4px 4px 4px;」中的「.logo-items a{」太...請參閱更新後的代碼： -

.logo-items a { 
    text-decoration: none; 
    color: white; 
    margin-left: 10px; 
    margin-right: 10px; 
    border-bottom:solid 1px transparent; 
    padding: 4px 4px 4px 4px; 
}

請參閱小提琴： - http://jsfiddle.net/eETN8/

希望這有助於！

來源

2013-10-02 14:24:36 UID

要麼刪除padding.logo-items a:hover或將相同的padding添加到.logo-items a。

padding: 4px 4px 4px 4px是用於設置4px填充（元素邊緣與其內容之間的空間）的CSS簡寫，但它僅適用於懸停狀態，因此導致您正在談論的幾個像素的移動。

此外，padding: 4px 4px 4px 4px;可以縮短爲padding: 4px;，因爲它們是相同的東西。我猜你添加了填充以使背景顏色在懸停時更好看，所以只需將padding: 4px添加到.logo-items a即可，而且您還可以輕鬆前往！

來源

2013-10-02 14:24:51 Ennui

這是邊界的問題，你需要在懸停前給你的邊界以避免像素移動

來源

2016-10-09 14:21:57

鏈接在CSS中懸停移動到右側？

回答

相關問題