重叠的悬停装饰

Question

鉴于以下图片，我真的不确定如何最好地解决这个问题。

我的意思是我可以制作精灵图像并将每个链接/图标置于绝对位置，以便在悬停状态发生时它们不会相互推动。然而问题是可点击区域会随着悬停状态而增长，从而与其他按钮重叠并使它们难以点击。

非常感谢任何建议/想法。

干杯！

我的解决方案归功于@ ioannis-karadimas

http://codepen.io/trev/pen/overlapping-hover-states/2

Answer 1

没试过，但我认为它应该有用。

.button:hover:after {
    display: inline;
    position: absolute;
    left: 60px; // button's width / 2
    width: 150px;
    height: 150px;
    background-image:url('cross.png');
}

Answer 2

如果没有涉及移动，则没有理由不能将触发区域与图像本身分开。使所有触发器不可见的div浮动在图形上方，可点击区域将保持不变且可预测。图形的变化，例如将图像与另一个图像重叠或更改精灵的位置，根本不需要与可点击区域相关。

为了帮助您进行初始定位和调试，您最初可以在每个图层周围放置一个边框，然后将它们放在图形上方。完成后，删除边框并使图层透明，用完全透明的GIF填充它们。

Answer 3

您需要在图标容器内创建绝对定位的元素（或伪元素），并在鼠标悬停时显示它们。因此，它不会影响悬停区域。

这是伪元素的示例，但是如果您需要支持IE＆lt; 8，你可以添加正常的：

http://jsfiddle.net/bFVx8/