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

您可以创建一个伪元素#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; }并改为设置样式：

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

Answer 2

您可以使用相对位置和左/上偏移，这似乎更好（即没有闪烁）：

func printArray(array: [Bar], condition: (Bar) -> Bool) {
    let tmp = array.filter(condition)
    print(tmp)
}

#button {
  width: 100px;
  height: 100px;
  background-color: #00f;
  box-shadow: 10px 10px 3px #aaa;
  position: relative;
}

#button:hover {
  left: 3px;
  top: 3px;
  box-shadow: 7px 7px 2.1px #888;
}

Answer 3

使用这样的伪元素：

#button {
  width: 100px;
  height: 100px;
  background-color: #00f;
  box-shadow: 10px 10px 3px #aaa;
  position:relative;
}
#button:before {
  content:"";
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
}

#button:hover {
  transform: translate(3px, 3px);
  box-shadow: 7px 7px 2.1px #888;
}
#button:hover::before {
  top:-3px;
  left:-3px;
}

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

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

3 个答案: