Question

我有一个网站（http://sheisbiddy.com/the-f-word/），当您将鼠标悬停在其上时，“阅读更多”链接会跳转。它只是在我添加填充以使其与下面的框相同时才开始发生。这是CSS：

a.more-link {display:block; text-align: center; color:#e9bdd8; text-transform:uppercase; font-size:85%; position: relative; bottom: 5px;}
a.more-link:hover {background-color:white;padding-top:10px; padding-bottom:10px;transition: color, background-color 0.1s linear; -moz-transition: color, background-color 0.1s linear; -webkit-transition: color, background-color 0.2s linear; -o-transition: color, background-color 0.1s linear;}

如果有所作为，我正在使用Safari。

Answer 1

好吧，当你悬停时，你会在顶部和底部添加10px的填充，这些填充在标准样式中不存在。尝试从悬停中删除这些元素

padding-top:10px; padding-bottom:10px;

那，或者你想要将这个填充添加到你的其他风格。

Answer 2

您希望填充是un :hover d选择器的一部分。这种方式仅在悬停时应用填充不会为链接添加任何大小。

a.more-link {padding 10px 0;}

或者，由于您已经在使用过渡，因此可以添加填充过渡以使“跳转”动画化。

a.more-link { transition: padding 0.2s linear; }

Answer 3

根据您的需要，您可以将填充添加到基类，如下所示： https://jsfiddle.net/78s24fpw/

a.more-link { padding-top:10px; padding-bottom:10px;display:block; text-align: center; color:#e9bdd8; text-transform:uppercase; font-size:85%; position: relative; bottom: 5px;}
a.more-link:hover {background-color:white;padding-top:10px; padding-bottom:10px;transition: color, background-color 0.1s linear; -moz-transition:

停止在悬停时跳跃的按钮

3 个答案: