jQuery:hover Div 顯示兄弟

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>

這里的想法是 on: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事件處理程序的“單一功能”版本中使用切換方法或技術。 （如在第一個片段中）。

Answer 2

給你 go

工作演示

hover需要 2 個函數，這是您代碼中的問題。 如果您只傳遞一個 function 它將調用它 onmouseover 以及 mouseout 事件。

Answer 3

將您的 JavaScript 更改為：

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

您沒有正確執行 hover。

演示

但是，以下代碼更加流暢和優化：

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

優化演示

Answer 4

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

一般.hover有兩個功能。 它可以作為 hover on 和 hover off function 使用。 這就是為什么您會看到它兩次淡入淡出。