鉴于以下图片，我真的不确定如何最好地解决这个问题。
我的意思是我可以制作一个精灵图像并将每个链接/图标定位为绝对位置，以便在发生悬停状态时它们不会相互推动。然而问题是可点击区域会随着悬停状态而增长，从而与其他按钮重叠并使其难以点击。
任何建议/想法将不胜感激。
干杯!
感谢@ioannis-karadimas 我的解决方案
问问题
115 次
3 回答
1
没试过，但我认为它应该工作。
.button:hover:after {
display: inline;
position: absolute;
left: 60px; // button's width / 2
width: 150px;
height: 150px;
background-image:url('cross.png');
}
于 2012-07-07T08:01:57.453 回答
1
如果不涉及运动，则没有理由不能将触发区域与图像本身分开。使所有触发器不可见的 div 漂浮在图形上方，可点击区域将保持不变且可预测。图形中的更改，例如用另一个图像覆盖图像或更改精灵的位置，根本不需要与可点击区域相关。
为了帮助您进行初始定位和调试，您可以先在每一层周围放置一个边框，然后将它们定位在图形上方。完成后，移除边框并使图层透明，并使用完全透明的 GIF 填充它们。
于 2012-07-07T08:05:26.747 回答
0
您需要在图标容器内创建一个绝对定位的元素（或伪元素）并在鼠标悬停时显示它们。因此，它不会影响悬停区域。
这是带有伪元素的示例，但如果您需要对 IE < 8 的支持，您可以添加普通元素：
于 2012-07-07T08:04:45.307 回答