顯示/隱藏懸停的數據屬性div

Question

我正在使用jQuery Isotope插件，並試圖實現此目的：當用戶將鼠標懸停在特定網格上時，該網格中的內容會發生更改。

這是我到目前爲止有：http://jsfiddle.net/wD64G/12/

HTML代碼：

<div class="item" data-target="firstbox"> 
    <div class="visible" > 
     I should disappear upon hover. 
    </div> 
    <div id="firstbox" class="padding not-visible"> 
     Hello, I should only appear when you hover over the grid.</div> 
    </div> 

<div class="item" data-target="secondbox"> 
    <div class="visible" > 
     I should disappear upon hover. 
    </div> 
    <div id="secondbox" class="not-visible"> 
     Hello, I should only appear when you hover over the grid.</div>   
    </div> 
</div> 

JS：這裏

$('.not-visible').hide(); 

$(".item").mouseover(function() { 
    var target = "#" + $(this).data("target"); 
    $(".not-visible").not(target).hide(); 
    $(".visible").hide(); 
    $(target).show(); 
}); 

$(".item").mouseout(function() { 
    var target = "#" + $(this).data("target"); 
    $(target).hide(); 
    $(".visible").show(); 
}); 

問題是，所有的div將給予類 「看得見」因此，將根據我擁有的代碼隱藏起來。我對jQuery非常陌生，我很難引用特定的div。我必須使用另一個數據屬性來引用它嗎？提前致謝！

Answer 1

您需要爲目標的徘徊.item的內容

$('.not-visible').hide(); 

$(".item").hover(function() { 
    $(this).find('.visible').hide(); 
    $(this).find('.not-visible').show(); 
}, function() { 
    $(this).find('.visible').show(); 
    $(this).find('.not-visible').hide(); 
}); 

演示：Fiddle