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

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。