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>

这里的想法就是：悬停隐藏的.larger_img div应该淡入。代码按预期工作但有一个怪癖 - 当悬停.larger_img div成功淡入但立即淡出。我的意图是.larger_img div只要.img_contain div是：hovered就可见了。

帮助？

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事件处理程序的“单一功能”版本中使用切换方法或技术。（如在第一个片段中那样）。

Answer 2

你去吧

工作demo

hover需要2个函数，这是您代码中的问题。如果只传递一个函数，它将调用onmouseover以及mouseout事件。

Answer 3

将您的JavaScript更改为：

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

你没有正确地悬停。

Demo

但是，以下代码更加流畅和优化：

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

Optimized Demo

Answer 4

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

一般.hover有两个功能。它可以采用一个，它既可以作为悬停，也可以作为悬停功能。这就是为什么你看到它既褪色又褪色两次。

jQuery：悬停Div以显示兄弟姐妹

4 个答案: