html - 如何保留元素的悬停区域？

Question

我一直在尝试创建在悬停时会稍微改变位置的元素 - 在这个示例中，我们对 3D 按钮进行了原始尝试，当悬停在该按钮上时它会稍微按下。一切都按预期工作，除非将鼠标悬停在顶部和左侧的 3 个像素上，在这种情况下，它会在两种状态之间快速闪烁。

是否可以在不创建重复透明元素的情况下使悬停区域不随元素移动并消除这种行为？ JavaScript 和 JQuery 解决方案都可以，但纯 HTML/CSS 最好。

#button {
  width: 100px;
  height: 100px;
  background-color: #00f;
  box-shadow: 10px 10px 3px #aaa;
}

#button:hover {
  transform: translate(3px, 3px);
  box-shadow: 7px 7px 2.1px #888;
}

<div id="button">
</div>

JSFiddle link

Answer 1

您可以创建一个伪元素 :after 并为其设置样式:

#button {
  width: 100px;
  height: 100px;
}

#button:after {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #00f;
  box-shadow: 10px 10px 3px #aaa;
  content: "";
}

#button:hover:after {
  transform: translate(3px, 3px);
  box-shadow: 7px 7px 2.1px #888;
}

<div id="button">
</div>