javascript - 重叠悬停装饰

标签 javascript jquery css html

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

enter image description here

enter image description here

enter image description here

enter image description here

我的意思是我可以制作一个 Sprite 图像并将每个链接/图标绝对定位,这样当发生悬停状态时它们就不会互相插入。然而问题是可点击区域会随着悬停状态而增大,从而与其他按钮重叠并使它们难以点击。

任何建议/想法将不胜感激。

干杯!

我的解决方案感谢@ioannis-karadimas

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

最佳答案

如果不涉及任何运动,就没有理由不能将触发区域与图像本身分开。使所有触发器不可见的 div float 在图形上方,并且可点击区域将保持不变且可预测。图形中的更改(例如将图像与另一个图像重叠或更改 Sprite 的位置)根本不需要与可点击区域相关。

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

关于javascript - 重叠悬停装饰,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11373331/

相关文章:

javascript - 删除具有特定id的div标签并保留内容

jquery - 我还应该在 1.4.2 中使用 jquery .getJson 吗?

Jquery -each 和 data()

html - 如何将图像放置在框架的右下角?

javascript - 使用网络 worker 预加载图像有优势吗?

javascript - 数据包含在一个数组/json中,想通过DOM注入(inject)到页面中,jQ有模板吗?

javascript - 播放 youtube 视频的超链接

javascript - jquery 中的 Div 溢出事件

html - 为什么我的菜单背景颜色只从图像的顶部到中心开始,而不是全部?

html - 我可以在 css 中 float body 吗?