javascript - jQuery :hover Div to reveal Sibling

Question

我在 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>

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

帮忙吗？

Answer 1

我认为这是你的意图:

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

每次鼠标悬停和鼠标移出时，您都在淡入和淡出相同的元素。您需要:

1 - 将淡入淡出操作分成两个函数:

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

2 - 在 .hover 事件处理程序的“单功能”版本中使用切换方法或技术。 (如第一个片段)。