Show/hide divs with data attribute on hover

Question

I am using jQuery Isotope plugin and am trying to achieve this: When a user hovers over a particular grid, the content in that grid changes.

Here's what I have so far: 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();
});

Problem here is that all the divs will be given the class "visible" and hence, will be hidden based on the code I have. I am very new to jQuery and I am having difficulty referencing just the specific div. Do I have to reference it using another data attribute instead? Thanks in advance!

Answer 1

You need to target the contents of the hovered .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();
});

Demo: Fiddle