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

时间:2018-05-10 09:24:02

标签: html css sass jsx

我构建了一个基于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;
      }
    }
  }

3 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

您可以使用插入box-shadow

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

Codepen demo

答案 2 :(得分:0)

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;
      }
    }
  }