jQuery:在两个元素上维持悬停

Question

我有一个<img>,一旦盘旋,动画和淡化 <div>的图片的更大版本,以及文本和超链接.当鼠标移出时,<div>动画就会消失.这很好,只有我的悬停功能只适用于它<img>自己.只要a)<div>出现在<img>,或者b)一个鼠标离开<img>即可到达<div>,jQuery读取鼠标并动画<div>离开.如何重新编写我的jQuery以允许我解决这个问题？提前致谢 ...

以下是HTML的一部分:

<img runat="server" src="~/images/pc_blocks_navigation_spec1.gif" class="navigation_spec1" alt="" />
<div class="navigation_spec1_panel">
    <p>filler <a href="#">test</a></p>
</div>

...和jQuery ......

$('.navigation_spec1_panel').hide().css('opacity','0.0');
$('.navigation_spec1').hover(function() { 
    $('.navigation_spec1_panel').animate({ 
          width: '337px', 
          height: '234px',
          opacity: 1.0 }, 
        1250 ); 
    }, function() { 
    $('.navigation_spec1_panel').animate({ 
          width: '1px', 
          height: '1px',
          opacity: 0.0 }, 
        1250); 
    });
});

(旁注释:在IE 6或7中,我的动画<div>不会出现在其他<div>s编码之上/ 之后.<div>无论z-index如何,它们都会出现在它们后面.建议？)

Answer 1

选项1:将img和div放在另一个div中,并在该外部div上设置事件.

选项2:在两个元素的mouseout-event上使用setTimer,在两个元素的mouseover-event上使用clearTimer,这为焦点移动创建了一个小的时间跨度,而不触发淡出代码.