时间戳

首页 > 解决方案 > CSS 转换在边框中显示背景颜色

css - CSS 转换在边框中显示背景颜色

问题描述

我有两个<div>元素。当用户悬停时，transform: translateY(x, y);应用转换。但是，当用户悬停时，也会以某种方式出现黑色边框（应该只有红色边框）。

分辨率： 1920*1080 在此处输入图像描述 

.link {
  display: block;
  height: 350px;
  width: 200px;
  background: black;
  border: 1px solid red;
}

.element {
  background: white;
  height: 100%;
  width: 100%;
}

.link:hover {
  transform: translateY(-5px)
}
<div class="link">
  <div class="element">
    test
  </div>
</div>

标签： csscss-transitionscss-transforms

解决方案

我不确定我是否理解这个问题，但摆脱悬停时黑色的一种方法是将背景设置为透明。请参阅下面的片段。

请注意，由于现代显示器对一个 CSS 像素使用多个“物理”像素，因此尝试精确对齐非常细的边框/线条（在这种情况下为 1 CSSpx）并不总是可行的。有时放大/缩小显示/不显示 1（显示）像素“落后”。我已经在这种情况下看到了这一点，因此某些显示尺寸可能会显示黑色。

.link {
  display: block;
  height: 350px;
  width: 200px;
  background: black;
  border: 1px solid red;
}

.element {
  background: white;
  height: 100%;
  width: 100%;
}

.link:hover {
  transform: translateY(-5px);
  background: transparent;
}
<div class="link">
  <div class="element">
    test
  </div>
</div>

推荐阅读