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