0

我正在为导航链接设置样式，当我将鼠标悬停在链接上时，它会改变颜色，但会在右侧移动几个像素，当光标从悬停状态中移除时，它又会恢复正常。

我的导航 CSS

.logo-wrapper {
  padding-bottom: 85px;
  background-color: #2e3639;

}

.logo-items{
  display: inline-block;
  position: relative;
  color: white;
  font: "Times New Roman";
  float: left;
  margin-left: 500px;
  margin-top: 30px;
  text-decoration: none;

}

.logo-items a{
  text-decoration: none;
  color: white;
  margin-left: 10px;
  margin-right: 10px;
  border-bottom:solid 1px transparent;
}

.logo-items a:hover {
  background-color: #61696c;
  padding: 4px 4px 4px 4px;
  border-radius: 10px;
}

.logo-items span {
  margin-right: 10px;
}

我的导航

<div class="logo-wrapper">
                <div class="logo-items">
                  <span>Logo</span>
                  <span>
                   <%= link_to "Tags", tags_path %>
                  </span>
                  <span>Pages</span>

                </div>
          </div>
4

4 回答 4

2

尝试这样做： -

padding: 4px 4px 4px 4px;在“”中添加“ ” .logo-items a{...请查看更新后的代码：-

.logo-items a {
    text-decoration: none;
    color: white;
    margin-left: 10px;
    margin-right: 10px;
    border-bottom:solid 1px transparent;
    padding: 4px 4px 4px 4px;
}

参考小提琴：- http://jsfiddle.net/eETN8/

希望这可以帮助！

于 2013-10-02T14:24:36.510 回答
2

嘿，你得到这个是因为你已经为你的 :hover 添加了填充以获得你的灰色背景效果。

.logo-items a:hover {
  background-color: #61696c;
  padding: 4px 4px 4px 4px;
  border-radius: 10px;
}

停止跳转的一种快速方法是首先向链接添加填充，以便宽度始终相同

.logo-items a{
  text-decoration: none;
  color: white;
  margin-left: 10px;
  margin-right: 10px;
  border-bottom:solid 1px transparent;
  padding:4px;
}

我在这里添加了一个小提琴http://jsfiddle.net/domjgreen/uNKm8/

于 2013-10-02T14:25:21.967 回答
1

删除paddingon.logo-items a:hover或将其添加padding到.logo-items a.

padding: 4px 4px 4px 4px是用于设置 4px 填充（元素边缘与其内容之间的空间）的 CSS 简写，但它仅适用于悬停状态，因此这就是导致您正在谈论的几个像素移动的原因。

此外，padding: 4px 4px 4px 4px;可以缩短为，padding: 4px;因为它们是相同的东西。我猜您添加了填充以使悬停时的背景颜色变化看起来更好，所以只需添加padding: 4px即可.logo-items a！

于 2013-10-02T14:24:51.703 回答
0

这是边框的问题，您需要在悬停之前为您的 a 提供边框，以避免像素移动

于 2016-10-09T14:21:57.433 回答