css 根据标题长度更改悬停大小答案

【问题标题】：css change hover size depending on header lengthcss 根据标题长度更改悬停大小
【发布时间】：2016-05-28 10:41:50
【问题描述】：

您好，我对此很陌生。我创建了一个网页，其中的链接在页面上水平运行。当我将鼠标悬停在每个标题上时，它都有背景颜色。但是，悬停大小是固定大小。我想知道如何让悬停根据链接长度自动调整。 /* 悬停时将链接颜色更改为#272727 */

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

感谢您的帮助

【问题讨论】：

请提供 html 的小提琴。谢谢

标签： css hover

【解决方案1】：

在我看来“最大宽度：200px;” CSS 属性不是必需的。所以试试：

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

如果不明确指定最大宽度，您的链接元素的大小将与其父 li 的宽度一致。所以当你设置hover时的背景颜色时，整个单词都会被高亮显示，不会溢出。

但如果你能提供一个小提琴来确认，那真的很有帮助！

【讨论】：

【解决方案2】：

如果我没有错，那么我想我得到了你的解决方案。您在问如何在不改变大小的情况下在悬停时提供背景颜色，或者您可能在悬停时遇到 li 大小的问题，所以请参阅fiddle

我对普通的a tag 使用了填充，并从悬停中删除了固定宽度。所以现在 m 只需更改背景颜色，它将自动应用于文本/链接。如果您遇到任何问题，请告诉我。谢谢

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

【讨论】：

非常感谢，我花了好几个小时试图弄清楚！它完美地工作
我的荣幸..如果它对您有帮助，请接受作为答案。 :)