顯示/隱藏只有一個DIV與JQuery

我有一個圖像頁面，我想要顯示/隱藏鼠標懸停的標籤。圖像也是鏈接，div被稱爲「.smallproj」。 JQuery腳本效果很好，但是當我將鼠標懸停在任何一個.smallproj實例上時，它顯示.smallproj p的所有實例。我知道我需要改變腳本，使得只有展示的.smallproj實例才能被展開，但在這種情況下，最好的方法是什麼？顯示/隱藏只有一個DIV與JQuery

jQuery腳本：

$(".smallproj a").on({ 
    mouseover: function() { 
     $(".smallproj p").show(); 
    },  
    mouseout: function() { 
     $(".smallproj p").hide(); 
    }  
});

來源

2013-02-22 JD Pirtle

請發表您的HTML。 – zakangelle 2013-02-22 18:03:35

你想使用this關鍵字，它指的是由事件指向的元素，然後從它（a元素正在上空盤旋）穿越到要在p元素顯示。一般情況下，作出任何關於他們的關係，只是他們都是裏面的東西與.smallproj類彼此這裏假設，將是這樣的：

$(".smallproj a").on({ 
    mouseover: function() { 
     $(this).closest(".smallproj").find("p").show(); 
    },  
    mouseout: function() { 
     $(this).closest(".smallproj").find("p").hide(); 
    }  
});

來源

2013-02-22 18:05:14 antialiasis

謝謝！這正是我想要完成的，並對正在做的事情做出了很好的解釋。 – 2013-02-22 19:22:06

我認爲你可以這樣做：

$('.smallproj p').hover(function(){ 
    $(this).show(); 
});

或者說，它看起來像你也想懸停鏈接，這樣試試：

$('.smallproj a').hover(function(){ 
    $(this).find('p').show(); 
});

來源

2013-02-22 18:03:26 user1477388

你可以使用各種方式。一些例子：

同一級別

$(".smallproj a").on({ 
    mouseover: function() { 
     $(this).siblings("p").show(); 
    },  
    mouseout: function() { 
     $(this).siblings("p").hide(); 
    }  
});

父

$(".smallproj a").on({ 
    mouseover: function() { 
     $(this).parent().find("p").show(); 
    },  
    mouseout: function() { 
     $(this).parent().find("p").hide(); 
    }  
});

底蘊：

來源

2013-02-22 18:03:54 Niels

顯示/隱藏只有一個DIV與JQuery

回答

相關問題