文章标签

当您更改字体的 `font-weight` 时，文本通常会导致一些布局偏移。这是因为粗体文本通常更大，占用更多空间。有时这并不重要，比如垂直堆叠的...

让我们创建一个纯 CSS 效果，在悬停时更改文本链接的颜色... 但是让新颜色滑入，而不是简单地交换颜色...

如果您从未遇到过幽灵按钮 👻，我不会感到惊讶。您知道的是：它们具有透明的背景，在悬停时会填充实色。Smashing Magazine 有一篇整篇文章介绍了这个想法。...

假设您想移动一个元素在 `:hover` 上，以获得有趣的视觉效果。

@media (hover: hover) {
  .list--item {
    transition: 0.1s;
    transform: translateY(10px);
  }
  .list--item:hover,
  .list--item:focus {
    transform: translateY(0);
  }
}

好的。但是如果你有...

我与之合作的设计师最近在一个团队会议上展示了作品。她出色地将设计系统的概念拼凑起来，从组件到模式，以及介于两者之间的一切，这些将使任何前端...

这是一个特别的设计技巧，它总能抓住人们的眼球！我不知道是谁先想到的，以及所有这些细节，但我知道多年来我看到了它的一些实现。...

假设您有一张世界地图，并且您希望能够在光标悬停在其上或点击它时突出显示国家/地区（或州、县等）。

可以做到！

首先，地图可能应该...

CSS 中的 `:hover` 伪类在鼠标光标当前悬停在元素上时选择元素。它通常与链接 ( `<a>` ) 元素相关联。

a:hover {
  color: green;
  text-decoration: underline overline;
}

所以当像这样的链接...