懸停間距下文字

我希望你能幫我解決這個問題。我想擴展我的懸停和我的文本之間的空間。懸停間距下文字

圖像：

example

#menu { 
    float: right; 
    height: 30px; 
    margin: 50px 70px 0; 
    width: 530px; 
} 

#menu a { 
    color: black; 
    font-size: 15px; 
    font-weight: bold; 
    padding: 12px 12px; 
    text-decoration: none; 
} 

#menu a:hover { 
    background: url(images/hover.png) repeat-x; 
}

所以我的問題是：

如何擴大文本菜單和懸停THNG之間的間距？
如何符合懸停長度文本？
如何讓懸停在活動頁面上可見？

來源

2013-07-15 Smulix

如何擴大文本菜單和懸停圖像之間的間距？
添加padding-bottom: 12px。將12px更改爲您選擇的值，這將調整水平間距。將0 bottom添加到background標記，這將保持圖像位於鏈接的底部。
如何限制懸停長度爲文本？
將您的padding添加到margin屬性，並取消填充。這意味着背景圖片的長度將與文字長度相匹配。
如何讓懸停在活動頁面上可見？
要使活動頁面懸停保持可見，您可以爲當前活動頁面提供selected的類。正如答案底部的HTML所示。

CSS：

#menu { 
    float: right; 
    height: 30px; 
    margin: 62px 82px 12px 12px; /* Adjust margin to include the padding */ 
    width: 530px; 
} 

#menu a { 
    color: black; 
    font-size: 15px; 
    font-weight: bold; 
    /* Remove your padding here. Has been adjusted in the margin */ 
    padding-bottom: 12px; /* Adjust to change the hover spacing */ 
    text-decoration: none; 
} 

#menu a:hover, #menu a.selected { 
    background: url(images/hover.png) repeat-x 0 bottom; 
}

HTML（類selected的實施例使用）：

<div id="menu"> 
    <a href="l1.html">Link 1</a> 
    <a href="l2.html" class="selected">Link 2</a> 
    <a href="l3.html">Link 3</a> 
</div>

來源

2013-07-15 13:01:50 Scott

謝謝！它工作得很好！ – Smulix

對不起，我是新來的，我想我現在正確標記了 – Smulix

@Huls謝謝。別客氣。 – Scott

更改背景圖片

background: url('images/hover.png') repeat-x 0 10px;

你在談論下的文字懸停的長度的位置？您既可以添加一個「活躍」類和風格也一樣懸停，或添加在：與#menu a:hover,#menu a:active

來源

2013-07-15 12:59:14

活躍起來試試background-position。
當您試圖使您的圖像符合文本的寬度時，請將無空格和填充的元素應用於您的懸停位置。
有一個額外的類附加到您的活動元素：#menu a:hover, #menu a.active。

來源

2013-07-15 13:01:38 Amberlamps

給你a的高度，並在底部
圖像定位將padding更改爲margin（以代替裏面的元素外空間）
做一個額外的類象.focus

#menu a { 
    color: black; 
    font-size: 15px; 
    font-weight: bold; 
    display: inline-block; 
    height: 60px; 
    padding: 12px 12px 0 12px; 
    text-decoration: none; 
} 

#menu a:hover { 
    background: url(images/hover.png) bottom left repeat-x; 
} 

#menu a.focus { 
    ... active link style 
}

來源

2013-07-15 13:02:02 LinkinTED

使用此：

#menu a { 
    color: black; 
    font-size: 15px; 
    font-weight: bold; 
    padding: 12px 12px; 
    text-decoration: none; 
    padding-bottom: 20px; 
    background-postion-y: -10px; 
}

來源

2013-07-15 13:21:16

懸停間距下文字

回答

相關問題