CSS:如何阻止悬停效果推送我的文本?

Posted

技术标签:

【中文标题】CSS:如何阻止悬停效果推送我的文本?【英文标题】:CSS: How do I stop hover effects from pushing my text? 【发布时间】: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;

【问题讨论】:

【参考方案1】:

您的大部分样式都位于 li 上,请尝试将它们移至 &lt;a&gt; 标记

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>

【讨论】:

以上是关于CSS:如何阻止悬停效果推送我的文本?的主要内容,如果未能解决你的问题,请参考以下文章

Html和CSS如何使具有悬停效果的图像成为超链接

使用 CSS3 悬停效果,如何将文本向左移动 5 个像素并向后移动?

如何在时事通讯中创建悬停效果?

在 CSS 悬停效果上,无法选择/应用效果到特定元素?

如何自动调整以适应 WP 中悬停文本描述图像中的所有文本

悬停时如何使用 CSS 将角度字符添加到此按钮的文本中?