CSS：如何阻止悬停效果推送我的文本？答案

【问题标题】：CSS: How do I stop hover effects from pushing my text?CSS：如何阻止悬停效果推送我的文本？
【发布时间】：2011-05-28 07:50:13
【问题描述】：

我希望你理解这个问题，你可以在这里看到一个例子：

http://jsfiddle.net/nFbJY/

当您滚动浏览它们移动的任何链接时 :(

关于如何解决这个问题的任何建议？

HTML：

<div class="links">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

CSS：

div.links {float: left; padding-top:15px;}
ul {list-style:none;}
li {float: left; margin: 0 .15em; padding: 3px 10px 3px 10px; border: 1px solid #CCC;          border-radius: 5px; -moz-border-radius: 5px;}
a:hover { border: 1px solid blue; border-radius: 5px; -moz-border-radius: 5px; padding: 3px 10px 3px 10px; background-color:yellow;}

【问题讨论】：

标签： html css hover menu

【解决方案1】：

您的大部分样式都位于 li 上，请尝试将它们移至 <a> 标记

li 
{
    float: left; 
    margin: 0 .15em; 
}

a, a:active, a:visited { 
    border: 1px solid #CCC; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    padding: 3px 10px 3px 10px;
}

a:hover 
{ 
    border: 1px solid blue; 
    background-color:yellow;
}

【讨论】：

【解决方案2】：

将您的 CSS 更改为：

div.links {float: left; padding-top:15px;}
ul {list-style:none;}
li {float: left;}
a {margin: 0 .15em; padding: 3px 10px 3px 10px; border: 1px solid #CCC; border-radius: 5px; -moz-border-radius: 5px;}
a:hover {border: 1px solid blue; background-color:yellow; }

这样，您只设置了 A 标记的样式，而不是 LI 和 A。因此，不是效果堆叠导致 2 个元素上的填充/边框，而是您只在一个元素上造成它。什么都没有被推来推去......

【讨论】：

【解决方案3】：

查看这个http://jsfiddle.net/huhu/Tn2HV/

div.links {float: left; padding-top:15px;}
ul {list-style:none;}
li { float:left; }
li a { margin: 0 .15em; padding: 3px 10px 3px 10px; border: 1px solid #CCC; border-radius: 5px; -moz-border-radius: 5px; }
li a:hover { background-color:yellow;}

<div class="links">
    <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="pricing.html">Pricing</a></li>
    <li><a href="faq.html">FAQ</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
    </ul>
 </div>

【讨论】：

【解决方案4】：

尝试将鼠标悬停在 li 元素而不是 a

~~a:hover { border: 1px solid blue; border-radius: 5px; -moz-border-radius: 5px; padding: 3px 10px 3px 10px; background-color:yellow;}~~

li:hover { background-color:yellow; }

【讨论】：

【解决方案5】：

最简单的方法是将margin 添加到您的a 元素并将margin: 0 添加到a:hover。这样，按钮的宽度总是相同的。或者，您可以使用padding（或border）做类似的事情。

编辑：在你的情况下，使用这个 CSS（尤其是最后两行）：

div.links {float: left; padding-top:15px;}
ul {list-style:none;}
li {float: left; margin: 0 .15em; padding: 3px 10px 3px 10px; border: 1px solid #CCC; border-radius: 5px; -moz-border-radius: 5px;}
a { margin: 0 11px; }
a:hover { border: 1px solid blue; margin: 0; border-radius: 5px; -moz-border-radius: 5px; padding: 3px 10px 3px 10px; background-color:yellow;}

【讨论】：

【解决方案6】：

将 CSS 定义 a:hover 切换为 li:hover。

http://jsfiddle.net/nFbJY/3/

div.links 
{
    float: left; 
    padding-top:15px;
}
ul 
{
    list-style:none;
}
li 
{
    float: left; 
    margin: 0 .15em; 
    padding: 3px 10px 3px 10px; 
    border: 1px solid #CCC; 
    border-radius: 5px; 
    -moz-border-radius: 5px;
}

li:hover 
{ 
    border: 1px solid blue; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    padding: 3px 10px 3px 10px; 
    background-color:yellow;
}

<div class="links">
    <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="pricing.html">Pricing</a></li>
    <li><a href="faq.html">FAQ</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
    </ul>
    </div>

【讨论】：