Question

当我将内容悬停在div中时，我会向右侧偏移，我知道这是因为我添加了左边框，但我怎么能避免这种情况？

ul li:hover {
  border-left: 4px solid #FF2F5A;
}

https://jsfiddle.net/eeeek/j8xaru7m/

Answer 1

虽然可以为非悬停状态设置透明边框，但有时可能会出现不需要的对齐。

这是一个使用伪元素的解决方案。 position: relative;上的ul li是绝对定位伪正确定位的必要条件。

＆＃13;

ul li {
  position: relative;                /*  added property  */
  margin-left: -26px;
  list-style-type: none;
  width: 491px;
  height: 50px;
  border-bottom: 1px solid #F2F2F2;
}

ul li > span {
  line-height: 40px;
  margin-left: 30px;
}

ul li:hover::before {                 /*  updated rule  */
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px; background: #FF2F5A;
}

.items {
  position: absolute;
  margin-left: -17.7px;
}

.block-with-items-style {
  margin-left: 50px;
  height: 400px;
  width: 300px;
  border: 2px solid #f2f2f2;
  box-shadow: 2px 2px 10px #adadad;
  resize: vertical;
  overflow: hidden;
}

＆＃13;

<div class="block-with-items-style">
  <div class="items">
    <ul>
      <li ng-repeat="record in records">
        <span>1</span>
        <span class="badge badge-style">2</span>
        <button class="delete" ng-click="Delete($index)">3</button>
      </li>
    </ul>
  </div>
</div>

＆＃13;

奖励：这样一来，人们也可以轻松添加动画

＆＃13;

ul li {
  position: relative;                /*  added property  */
  margin-left: -26px;
  list-style-type: none;
  width: 491px;
  height: 50px;
  border-bottom: 1px solid #F2F2F2;
}

ul li > span {
  line-height: 40px;
  margin-left: 30px;
}

ul li::before {                      /*  added rule  */
  content: '';
  position: absolute;
  top: 50%; left: 0; bottom: 50%;
  width: 4px; background: #FF2F5A;
  transition: top .5s, bottom .5s;
}
ul li:hover::before {                /*  updated rule  */
  top: 0; bottom: 0;
}

.items {
  position: absolute;
  margin-left: -17.7px;
}

.block-with-items-style {
  margin-left: 50px;
  height: 400px;
  width: 300px;
  border: 2px solid #f2f2f2;
  box-shadow: 2px 2px 10px #adadad;
  resize: vertical;
  overflow: hidden;
}

＆＃13;

<div class="block-with-items-style">
  <div class="items">
    <ul>
      <li ng-repeat="record in records">
        <span>1</span>
        <span class="badge badge-style">2</span>
        <button class="delete" ng-click="Delete($index)">3</button>
      </li>
    </ul>
  </div>
</div>

＆＃13;

Answer 2

使用以前的css指令创建不可见（100％alpha）边框。只要hover处于活动状态，它就会用红色覆盖该透明边框。这是代码：

＆＃13;

ul li {
  margin-left: -26px;
  list-style-type: none;
  width: 491px;
  height: 50px;
  border-bottom: 1px solid #F2F2F2;
}

ul li > span {
  line-height: 40px;
  margin-left: 30px;
}

/* Sylogista's upgrade begin */

ul li:not(:hover)
{
  border-left: 4px solid rgba(255,255,255,0);
}

/* Sylogista's upgrade end */

ul li:hover {
  border-left: 4px solid #FF2F5A;
}

.items {
  position: absolute;
  margin-left: -17.7px;
}

.block-with-items-style {
  margin-left: 50px;
  height: 400px;
  width: 300px;
  border: 2px solid #f2f2f2;
  box-shadow: 2px 2px 10px #adadad;
  resize: vertical;
  overflow: hidden;
}

＆＃13;

<div class="block-with-items-style">
  <div class="items">
    <ul>
      <li ng-repeat="record in records">
        <span>1</span>
        <span class="badge badge-style">2</span>
        <button class="delete" ng-click="Delete($index)">3</button>
      </li>
    </ul>
  </div>
</div>

＆＃13;

:not(:hover)是可选的。如果没有它，代码会很好用，但在我看来 - 使用它可能是一种很好的做法。什么时候？这不是辩论的地方，但让我在答案的边缘给出一个简短的例子：当你以这种方式使用许多州和元素之间的关系创造巨大的CSS时 - 它看起来更清晰。在那种情况下，如果没有它可能更清楚，但我不会改变它。即便只是因为没有那么多人使用:not甚至记住这一点。

禁用悬停选择器上的偏移内容

2 个答案: