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

Question

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

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

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

Answer 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个元素上的填充/边框，而只是在一个元素上引起它。 什么都没有被推开......

Answer 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> 

Answer 4

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

编辑：在您的情况下，使用此CSS（尤其是最后2行）：

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

Answer 5

切换CSS定义a:hover to 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> 

Answer 6

尝试悬停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; }