Question

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

我的导航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>

Answer 1

尝试这样做： -

在“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/

希望这有帮助！

Answer 2

嘿，你得到这个，因为你已经添加了填充：悬停以获得灰色背景效果。

.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/

Answer 3

删除padding上的.logo-items a:hover或将padding添加到.logo-items a。

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

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

Answer 4

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

链接在CSS中向右移动？

4 个答案: