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 上,请尝试将它们移至 <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>
【讨论】:
以上是关于CSS:如何阻止悬停效果推送我的文本?的主要内容,如果未能解决你的问题,请参考以下文章