悬停时锚定链接（“ul li a”）

Question

我试图在悬停时停止移动 objects。

看看我在做什么>JSFIDDLE

当悬停第二个 link (TEST2) 时，它变为粗体属性（必须如此），但它会将另一个按钮 (TEST) 推向左侧。我怎样才能锚定 header 中的其他元素并停止它们的移动？

Answer 1

给他们一个固定的宽度，即width:80px

Answer 2

将项目 class 赋予普通列表元素，将分隔符 class 赋予分隔符列表元素

<div class="header-bg">
  <div class="container">
    <div class="menu-header">
      <nav>
        <ul>
          <li class="item"><a href="#">Test</a></li>
          <li class="seperator"><span>&there4;</span></li>
          <li class="item"><a href="#">Test2</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>

并为 .item class

处的列表元素提供固定宽度

.item {
    width:70px;
}

工作demo

悬停时锚定链接（“ul li a”）

Anchored links(" ul li a") when hovering

html

css

anchor