jquery - 在 CSS 背景图像上悬停缩放和单击效果 - Jquery

Question

**场景一

我有一张 map ，上面有位置，一旦将鼠标悬停在某个位置上，我希望图标放大/增大，并包含一个包含位置名称的 div 从侧面滑入，在下面的 div 中，然后一次鼠标光标离开图标区域 我希望 div 和位置名称向后滑动(完全消失)，然后将位置图标返回到其原始大小。

**场景二

一旦将鼠标悬停并单击，我希望该图标保持其放大尺寸，在位置名称下方显示实际地址，直到它或另一个图标被选中/单击。

我已经开始使用下面的 jsfiddle，但由于我在使用 jquery 方面还很陌生，所以似乎无法更进一步:

http://jsfiddle.net/gavAusWeb/sCFX2/2/

可以在页面右下角的此处找到我试图实现的实例。

http://www.aviationgroundhandling.com.au/

提前致谢!! :)

附言。我正在使用 CMS，因此必须使用背景图像来完成，欢呼 ;)

Answer 1

zoom 不是您想象的那样。事实上，zoom 是 IE 独有的“特性”，常用于在出现 bug 时触发 hasLayout。它不是调整浏览器或元素缩放的功能。对于您想做的事情，您可以使用 css3 转换，特别是 scale。或者 SVG 也可以是一个选项。最后，您可以使用 jQuery 为包含不同帧的图像 sprite 设置动画。