更改字体粗细时如何停止悬停文字？

Question

更改字体粗细时，如何停止悬停的文本移动？

我的标准<a>具有font-weight: 300然后将鼠标悬停时更改为font-weight: 700 ，这导致文本移动，如何解决此问题？

代码笔演示

的HTML

<ul class="clearfix">
  <li><a href="">Testing 1</a></li>
  <li><a href="">Testing 2</a> </li>
  <li><a href="">Testing 3</a> </li>
  <li><a href="">Testing 4</a> </li>
</ul>

CSS：

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.clearfix {
  display: inline-block;
}

/* start commented backslash hack \*/
* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}

/* close commented backslash hack */
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  background: #c2c2c2;
  font-family: 'Roboto Slab', serif;
}
ul li {
  float: left;
  display: block;
  border-left: 1px solid #eeeff2;
}
ul li a {
  text-decoration: none;
  font-size: 25px;
  display: block;
  padding: 20px;
  font-weight: 300;
}
ul li a:hover {
  font-weight: 700;
}

Answer 1

这很麻烦，但是由于字体变粗导致更改单词的总宽度，因此您可以像这样缩短字母之间的间距

a {
            text-decoration: none;
            font-size: 25px;
            display: block;
            padding: 20px;
            font-weight: 300;

            &:hover {
                font-weight: 700;
                letter-spacing: -.2px;
            }
        }

Answer 2

抱歉，我必须另作答。 我的错

Answer 3

请勿更改字体粗细或字母间距。 （当然，您可以根据需要使用font-weight和所有样式来设置字体样式，但不要在：hover上进行更改）。

为了使文本在鼠标悬停时更粗体/可见，只需将文本阴影添加到：hover样式即可。 这不会移动文本，而只是在其周围添加边框。

例如：

text-shadow: 1px 0 black;

或（用于更大胆的样式）：

text-shadow: 1px 0 black, -1px 0 black, 0 -1px black, 0 1px black;

Answer 4

也许在对象（li）上设置宽度？

Answer 5

由于更改了字体粗细，因此单词的宽度增加，从而导致其移动。 增加非悬停链接中的字母间距将得到期望的结果。

    a {
        text-decoration: none;
        font-size: 25px;
        display: block;
        padding: 20px;
        font-weight: 300;
        letter-spacing: 1.25px;
        &:hover {
            font-weight: 700;
            letter-spacing: 1px;
        }
    }