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>s 在 IE 6 或 7 中在此之后编码。出现 <div> 而是在它们后面，而不考虑 z-index。建议？）

Answer 1

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

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

Answer 2

你的意思是你的 div 放在你的图片上吗？

如果是这种情况，您可以将鼠标移出功能分配给 div 而不是图像：

$('.navigation_spec1_panel').hide().css('opacity','0.0');

$('.navigation_spec1').mouseover(function() { 
    $('.navigation_spec1_panel').animate({ 
          width: '337px', 
          height: '234px',
          opacity: 1.0 }, 
        1250 ); 
    };
});

$('.navigation_spec1_panel').mouseout(function() { 
    $(this).animate({ 
          width: '1px', 
          height: '1px',
          opacity: 0.0 }, 
        1250); 
    });
});

Answer 3

（注意：这对我自己来说是一个可以接受的答案，但是因为初始条件已经改变。我相信这个问题仍然可行）

我已更改我的代码，不使用带有<a> 的<div>，而是使用带有尺寸和背景图像的<a>。这样，我只有一个标签，使之前的错误没有意义。我还没有在 IE 中测试过这个，但是......

Answer 4

这个 jQuery 方法有点复杂，但它可以很好地维持悬停在两个元素上。此示例假设您使用两个单独的 DIV 元素，其 id 为“div1”和“div2”。此示例还假设一个元素将是“触发器”（即 div1），一个元素将是“响应”（即 div2）。当用户的鼠标悬停在触发器上时，会显示响应。当用户的鼠标离开触发器和响应时，响应被隐藏。我使用 jQuery slideUp 和 slideDown 作为过渡效果，但任何 jQuery 过渡都可以替代。我还添加了一些填充和边框样式来帮助直观地展示这个概念。

HTML：

<style>
    #div1 { padding: 20px; border: 1px solid #000000; }
    #div2 { padding: 20px; border: 1px solid #ff0000; }
</style>

<div id='div1'>Some Content</div>
<div id='div2'>Some Other Content</div>

javascript 代码使用 setTimeout 调用添加一个小的延迟，以允许鼠标从一个 DIV 转换到另一个 DIV。如果两个 DIV 彼此相对放置，则此超时可能非常小。改变“hover_timeout”的值会改变过渡时间。

注意： 'mouseenter' 和 'mouseleave' 的使用对于本示例很重要。有关 mouseenter 与 mouseover 使用的更多详细信息，请参阅此堆栈帖子：Jquery mouseenter() vs mouseover()

JAVASCRIPT：

var trigger_element = "#div1";
var response_element = "#div2";
var hover_timeout = 250; // milliseconds

function hideElement(waitTime)
{
    setTimeout(function() 
    {
        if (!$(trigger_element).is(":hover") && !$(response_element).is(":hover"))
        {
            $(response_element).slideUp();
        }
    },waitTime);
}

// trigger mouse enter
$(trigger_element).mouseenter (function() 
{
        $(response_element).slideDown();
});

// trigger mouse leave
$(trigger_element).mouseleave (function() 
{
    hideElement(hover_timeout);
});

// response mouse enter
$(response_element).mouseenter (function() 
{
    // do nothing
});

// response mouse leave
$(response_element).mouseleave (function() 
{
    hideElement(hover_timeout);
});