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); 
    });
});

（旁注释：我的动画<div>没有显示在上方/上方在IE 6或7中以此编码的其他<div> s <div>出现。{{1}} 相反，他们在后面，无论z-index如何。建议？）

Answer 1

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

选项2：对两个元素的mouseout-event使用setTimer，对两个元素使用mouseTimer的mouseTimer，这会创建一个小的时间跨度，让焦点移动而不会触发淡出-code。

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

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

我已将我的代码更改为不使用内置<div>的{{1}}，而是使用带有大小和背景图像的<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与鼠标悬停的更多详细信息，请参阅此堆栈帖子：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);
});

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

4 个答案: