jQuery将鼠标悬停在仅图像内容而不是Alpha上

时间:2012-07-17 14:20:30

标签: javascript jquery css jquery-ui css3

也许标题不是很好,但我的措辞有点麻烦......

基本上,是否有可能让jQuery的悬停仅触发带有alpha通道的png的实际内容。

所以在下图中;

http://i.imgur.com/3kO7v.png

仅触发矩形而不是构成文档边界其余部分的alpha通道...

我已经尝试过显而易见的$('obj')。hover(function(){stuff})但是这也会在alpha通道上触发......

最终的实现将是针对更复杂的形状,而不仅仅是旋转的方形,所以css3技巧是主要的基础,但可以与备份/垫片一起使用,另外我需要支持IE7和ipad ,iPhone,iPod的....

如果有CSS2解决方案,那么这也是合适的。此外,对此问题的任何真正指导都非常受欢迎。 我的备份将是一个空div,显示块并将其放置在形状上,然后使用它。对于较小的方形物体,这显然不是理想的。

任何点击或提示都非常受欢迎。

谢谢

1 个答案:

答案 0 :(得分:1)

是的,这可能取决于元素的堆叠上下文。请记住,当您对页面上的任何特定元素进行聚焦时,您实际上将所有其他元素聚焦在同一堆叠上下文中。

所以你可以做的是阻止事件冒泡堆栈(如果你想要“悬停”的元素在堆栈中低于要防止悬停效果的元素),或者特意放入阻止除了您想要实际获得悬停效果的元素之外,堆叠上下文中所有元素的onhover事件的默认值。