4

我有一个<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 中在此之后编码的其他 s之上/之上。<div>无论z-index如何，它们都出现在它们后面。建议？）

4

4 回答 4

8

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

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

于 2009-03-16T22:10:18.003 回答
2

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

如果是这种情况，您可以将 mouseout 功能分配给 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); 
    });
});
于 2009-03-16T21:24:50.063 回答
0

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

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

于 2009-03-16T21:56:34.807 回答
0

这个 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);
});
于 2012-09-13T20:27:40.947 回答