使用变换后重新缩放和错误的颜色：悬停时缩放

Question

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

<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。

您将找到更多关于如何在 CSS 中使用 border-Functions 的信息，例如 here。