内底白色轮廓

Question

我正在克隆 Quizlet.com。卡在主屏幕样式上。 将鼠标悬停在卡片上会添加下划线，表示该卡片已被选中。

不悬停时：测验：

我的网站：

当鼠标悬停在测验上时：

当鼠标悬停在我的网站上时：

我在 css 中添加了 border-bottom 并且它被添加到区域之外，而不是在 div 标签的区域内。

编辑： 解决了卡被推出的现象。但我不喜欢卡片下的阴影。我会附上照片。

Answer 1

您可以尝试两种选择：

• box-shadow

• ::after 伪元素

box-shadow：

可能是最短的解决方案 - 创建一个仅在底部可见的 box-shadow，通过指定相同的 blur 和 spread（分别为第 3 个和第 4 个参数）来实现。

div {
  width: 100px;
  height: 50px;
  background-color: #1E2230;
  border-radius: 5px;
  transition: 0.2s;
}

div:hover {
  box-shadow: 0 14px 2px 2px white;
}

body {
  background-color: #ededed;
}

<div></div>

^{注意：不符合OP的要求——轮廓在外面，不在里面}

::after 伪元素

在0px的{​​{1}}的底部绝对定位一个高度为100%、宽度为10px、边框为div的元素必须是 position。

我会推荐这个解决方案，看看它是如何轻松定制和理解的。

relative

div {
  width: 100px;
  height: 50px;
  background-color: #1E2230;
  border-radius: 5px;
  transition: 0.2s;
  position: relative;
}

div:hover:after {
  content: '';
  border-bottom: 10px solid white;
  position: absolute;
  height: 0px;
  bottom: 0;
  width: 100%;
  left: 0;
}

body {
  background-color: #ededed;
}

Answer 2

如果您使用 devtool 并定位该特定 div，我想您会知道 Quizlet 中该 div 中的操作。