jQuery:将鼠标悬停在两个元素上

Question

我有一个<img>一旦悬停在上面，就会动画并消失 <div>图片的放大版本，以及文字和 超链接。鼠标移出时，<div>动画并消失。这 工作正常，只有我的悬停功能仅适用于 <img>本身。 一旦 a) <div>出现在<img>之上，或 b) 一 鼠标移开<img>到达<div> , jQuery 读取 mouseout 并 动画 <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); 
    });
});

(旁注:我的动画 <div> 没有出现在 其他<div>在 IE 6 或 7 中，在这之后编码。<div>出现 相反，无论 z-index 是多少。建议？)

Answer 1

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

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