html - 使用转换 :scale on hover 后重新缩放和错误的颜色

Question

我有一个 block 内有一个 div 的图像，它在鼠标悬停时缩放得更大，然后该 block 在悬停时变成显示 block 。我的代码是这样的:

<div>
  <img>
  <div class="social-sharing">
    <a href="#" class="fb">Fb</a>
    <a href="#" class="twitter">Twitter</a>
  </div>
</div>

我的 CSS (LESS) 如下所示:

div {
  &:hover {
    transform: scale(1.1);
    .social-sharing {
      display: block;
    }
  }
  .social-sharing {
    display: none;
    .fb {
      border-right: 3px solid #fff;
    }
  }
}

当我将鼠标悬停时，img 会重新缩放一点，对我来说更重要的是边框的白色不仅仅是白色，而是灰色。

可以看到in my codepen

为什么会这样，如何解决？

Answer 1

抱歉，我不太明白你的问题，但我会试试...

如果你想在你的 Facebook 按钮周围有一个完整的白色边框，只需编写 border: 3px solid #fff;，而不是 border-right: 3px solid #fff;

如果你想要一个完整的白色边框，只需将 border 3x solid #fff 直接放入 .social-sharing-Block。

您会找到更多有关如何使用 border 的信息 - 例如 CSS 中的函数 here .