悬停缩放&单击CSS background-image上的效果 - Jquery

时间:2012-03-16 04:48:45

标签: jquery css click hover background-image

**情景1

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

**情景2

曾经徘徊在&然后点击我希望图标保持放大尺寸,显示位置名称下面的实际地址,直到它或其他图标被选中/点击。

我已经在下面的jsfiddle上开始了,但似乎无法进一步发展,因为我在使用jquery方面相当新:

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

可以在页面右下方找到我想要实现的实例。

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

提前致谢!! :)

PS。我正在使用CMS,因此必须使用背景图像,欢呼;)

1 个答案:

答案 0 :(得分:0)

zoom不是您认为的那样。实际上,zoom是仅IE的“功能”,通常用于在出现错误时触发hasLayout。调整浏览器或元素的缩放不是一项功能。 对于您想要做的事情,您可以使用css3过渡,尤其是scale。或SVG也可以选择。最后,不那么优雅,您可以使用jQuery为包含不同帧的图像精灵设置动画。