我有一个 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
为什么会这样,如何解决?
最佳答案
抱歉,我不太明白你的问题,但我会试试...
如果你想在你的 Facebook 按钮周围有一个完整的白色边框,只需编写 border: 3px solid #fff;
,而不是 border-right: 3px solid #fff;
如果你想要一个完整的白色边框,只需将 border 3x solid #fff
直接放入 .social-sharing
-Block。
您会找到更多有关如何使用 border
的信息 - 例如 CSS 中的函数 here .
关于html - 使用转换 :scale on hover 后重新缩放和错误的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39332380/