Question

我需要在鼠标悬停时将当前位置之前的5像素高亮显示。也就是说，如果用户将指针传递给它，则div将在之前的5个像素处突出显示，但不会更改其内容位置。

.container {
  width: 100%;
  &:hover {
    background-color: rgba(0, 0, 0, 0.1);
    position: relative;
    padding-left: 5px;
  }
}

<div class='container'>
  <a href='#'>Click me!</a>
</div>

鼠标悬停在它上面但是“点击我！”消息向右移动5个像素。我怎样才能做到这一点？

Answer 1

添加margin-left：-5px;你的悬停类

＆＃13;

.container {
  width: 100%;

  
}
.container:hover {
    background-color: rgba(0, 0, 0, 0.1);
    position: relative;
    margin-left:-5px;
  }

＆＃13;

<div class='container'>
   <a href='#'>Click me!</a>
</div>

＆＃13;

Answer 2

试试这个SCSS

.container {
  width: 100%;

  &:hover {
    background-color: rgba(0, 0, 0, 0.1);
    position: relative;
    padding-left: 5px;
    a{
    margin-left:-5px;
     }
  }
}

Link for reference

希望这会有所帮助..

Answer 3

我看过这个看起来很有趣。

向左移动元素5px，同时用填充保留内容（并向宽度添加5px以抵消移位）

你应该有这样的东西：

  <div ng-controller="RegionController">
   <div class="col-lg-12">
    <div class="panel-body">
        <div class="table-responsive">
              <table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-striped table-bordered table-hover">
           </table>
        </div>
    </div>
  </div>
  </div>

Code pen here

Answer 4

使用outline属性。这实际上就是它的用例。它提高了可访问性。有关详情，请阅读http://www.outlinenone.com

如何在链接之前设置一些空格而不移动链接位置？

4 个答案: