css更改懸停大小取決於標題長度

Question

enter image description here

你好，我很新的這個。我創建了一個網頁，其中包含橫跨頁面水平鏈接的網頁。當我將鼠標懸停在每個標題上時，它都具有背景顏色。但懸停大小是固定的大小。我想知道如何讓懸停自動調整，具體取決於鏈接長度。 /*更改鏈接顏色爲＃272727懸停*/

li a:hover 
    { 
     background-color:#272727; 
     max-width:200px; 
    } 

感謝您的幫助

Answer 1

它看起來對我說，「最大寬度：200像素;」 CSS屬性不是必需的。因此，請嘗試：

li a:hover 
{ 
    background-color:#272727; 
} 

沒有指定明確的最大寬度，您的鏈接元素將根據其父li的寬度調整大小。所以當你設置懸停的背景顏色時，整個單詞將被突出顯示，而不會溢出。

但是，如果你可以提供一個小提琴來確認，那真的很有幫助！

Answer 2

如果m沒有錯，那麼我認爲我得到了你的解決方案。你是問，你怎麼可以給懸停背景顏色不改變大小或可能被你所面臨的問題與李的尺寸，同時徘徊所以請參閱本fiddle

我用填充正常a tag和刪除固定寬度徘徊。所以現在只需更改背景顏色，它將自動應用於文本/鏈接。如果您有任何問題，請告訴我。謝謝

HTML

<div> 
    <ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">RESCUES</a></li> 
    <li><a href="#">Help</a></li> 
    <li><a href="#">VEHICLES</a></li> 
    <li><a href="#">VOLUNTEERS</a></li> 
    <div style="clear:both;"></div> 
    </ul> 
</div> 

CSS

div{background-color:teal;width:100%;} 
li a:hover{background-color:#272727; color:#fff;} 
li a{ padding:6px;} 
ul li{list-style-type:none;float:left;padding:6px;} 
li a {text-decoration:none;}