Javascript jQuery：悬停Div以显示兄弟

我在jQuery中有以下内容

// Larger sidebar images fades in on :hover
$("#left_sidebar .img_contain").hover(function(){
    $(this).find(".larger_img").fadeIn("slow");
    $(this).find(".larger_img").fadeOut("slow");
});

使用以下HTML

        <div class="img_contain">
        <img width="160" height="240" src="/smaller.jpg">
        <div class="larger_img" style="display: none; ">
              <img width="300" height="450" src="/larger.jpg">
            </div>
    </div>

这里的想法是：悬停在隐藏处。较大的img div应该淡入。代码按预期工作，但有一个怪癖-当悬停较大的.img div时，成功淡入但立即淡出。我的意图是只要.img\u contain div处于：悬停状态，较大的.img div就会保持可见

---

帮助？

我想这是你的意图：

$("#left_sidebar .img_contain").hover(function(){
    $(this).find(".larger_img").fadeToggle("slow");
});

在每个mouseover和mouseout上，您都在淡入淡出相同的元素。您需要：

1-将两个淡入淡出操作分为两个功能：

$("#left_sidebar .img_contain").hover(function(){
    $(this).find(".larger_img").fadeIn("slow");
}, function() {
    $(this).find(".larger_img").fadeOut("slow");
});

---

2-在.hover事件处理程序的“单函数”版本中使用切换方法或技术。就像第一段一样。

我想这就是你的意图：

$("#left_sidebar .img_contain").hover(function(){
    $(this).find(".larger_img").fadeToggle("slow");
});

$(".img_contain").hover(function(){
    $(this).find(".larger_img").fadeIn("slow");
},function(){
    $(this).find(".larger_img").fadeOut("slow");    
})

在每个mouseover和mouseout上，您都在淡入淡出相同的元素。您需要：

1-将两个淡入淡出操作分为两个功能：

$("#left_sidebar .img_contain").hover(function(){
    $(this).find(".larger_img").fadeIn("slow");
}, function() {
    $(this).find(".larger_img").fadeOut("slow");
});

2-在.hover事件处理程序的“单函数”版本中使用切换方法或技术。就像第一段一样

$(".img_contain").hover(function(){
    $(this).find(".larger_img").fadeIn("slow");
},function(){
    $(this).find(".larger_img").fadeOut("slow");    
})

通常，hover有两个功能。它可以使用一个，同时作为悬停打开和悬停关闭功能。这就是为什么你会看到它两次淡入淡出

通常，hover有两个功能。它可以使用一个，同时作为悬停打开和悬停关闭功能。这就是为什么你会看到它两次淡入淡出。

给你

工作

hover接受2个函数，这是代码中的问题。如果只传递一个函数，它将在mouseover和mouseout事件上调用它。

给你

工作

---

hover接受2个函数，这是代码中的问题。如果只传递一个函数，它将在mouseover和mouseout事件上调用它。

将JavaScript更改为：

$("#left_sidebar .img_contain").hover(
    function() {$(this).find(".larger_img").fadeIn("slow");},
    function() {$(this).find(".larger_img").fadeOut("slow");}
);

你没有正确地进行悬停

但是，以下代码更加平滑和优化：

$("#left_sidebar .img_contain").hover(
    function() {$(".larger_img",this).stop(true, true).fadeIn("slow");},
    function() {$(".larger_img",this).stop(true, true).fadeOut("slow");}
);

---

将您的JavaScript更改为：

$("#left_sidebar .img_contain").hover(
    function() {$(this).find(".larger_img").fadeIn("slow");},
    function() {$(this).find(".larger_img").fadeOut("slow");}
);

你没有正确地进行悬停

但是，以下代码更加平滑和优化：

$("#left_sidebar .img_contain").hover(
    function() {$(".larger_img",this).stop(true, true).fadeIn("slow");},
    function() {$(".larger_img",this).stop(true, true).fadeOut("slow");}
);

---

这管用！将在stackoverflow允许我时接受。。。不相关的问题-是否有原因使.hoverIntent函数不能为不同的元素调用多次。。。我真的应该用它来达到这个效果。我从来没有用过那个插件，但我不明白为什么不。另外，您所追求的“延迟”类型其实并没有那么复杂，这里有很多问题，所以请在search.fadeToggle中尝试“javascript hover delay”或类似的方法，大多数切换效果常常被忽略。它们在使用时总是看起来更干净。同意@rkw我总是使用fadeToggle来实现这些效果，但不知怎的忘记了。这很有效！将在stackoverflow允许我时接受。。。不相关的问题-是否有原因使.hoverIntent函数不能为不同的元素调用多次。。。我真的应该用它来达到这个效果。我从来没有用过那个插件，但我不明白为什么不。另外，您所追求的“延迟”类型其实并没有那么复杂，这里有很多问题，所以请在search.fadeToggle中尝试“javascript hover delay”或类似的方法，大多数切换效果常常被忽略。它们在使用时总是看起来更干净。同意@rkw我总是使用fadeToggle来实现这些效果，但不知何故忘记了。在这里发布你的代码。仅链接的答案实际上毫无价值。请在此处发布您的代码。仅链接的答案实际上毫无价值。+1用于预测需要。停止-幸运的是我在看到你的帖子之前已经记住了。+1用于预测需要。停止-幸运的是我在看到你的帖子之前已经记住了。