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

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链接

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>