Question

我构建了一个基于li标记的导航块，其外观如下screencasts。如你所见，整个盒子正在移动，如何避免盒子移动的问题？

html是ReactJs的一个组件：

<li className="nav-item">
  <a className="nav-link" href={href}>
    {children}
    <span className="pl-3 nav-link-text font-weight-bold">{ReasonReact.string(text)}</span>
  </a>
</li>

基于scss的样式：

  >.nav-item {
    >.nav-link {
      color: #515253;
      &:hover {
        color: #85899B;
        border-left: 5px solid #37BDE7;
        background-color: #f2f2f2;
      }
    }
  }

Answer 1

将透明border-left添加到非悬停状态：

 >.nav-item {
    >.nav-link {
      color: #515253;
      border-left: 5px solid transparent;
      &:hover {
        color: #85899B;
        border-left-color: #37BDE7;
        background-color: #f2f2f2;
      }
    }
  }

Answer 2

您可以使用插入box-shadow

代替边框

a:hover {
   box-shadow: inset 5px 0 0 #37BDE7;
}

Codepen demo

Answer 3

You can also add left border on hover before like,

>.nav-item {
    >.nav-link {
      color: #515253;
      position:relative;
      &:hover {
        color: #85899B;
        background-color: #f2f2f2;
      }
      &:hover:before{
       content: '';
       height: 100%;
       width: 5px;
       background: #37BDE7;
       position: absolute;
       left: 0;
       top: 0;
      }
    }
  }

如何避免悬停时的盒子移动？

3 个答案: