Question

我正在使用jQuery Isotope插件并尝试实现此目的：当用户将鼠标悬停在特定网格上时，该网格中的内容会发生变化。

以下是我到目前为止的内容：http://jsfiddle.net/wD64G/12/

HTML code：

<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

在悬停时显示/隐藏具有数据属性的div

1 个答案: