显示/隐藏悬停的数据属性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