单个重复元素上的​​JS mouseOver（带有多个类选择器）

Question

I'm struggling with a mouseOver effect. You can see what I'm working with Here: http://jsfiddle.net/4t4nM/1/

Here's the HTML structure I'm using

<div class="row">
   <div class="large-3 small-6 columns">
      <div class="panel">News  + Video </div>
   </div>
</div>

The functionality I'm trying to build is that when you mouse over the "large-3 small-6 columns" the "panel" div in that specific cell (Not the other cells with the same class) goes through this animation:

$( function(){
  $('.large-3').mouseenter( function(){
    $('.panel').stop().animate({opacity:1});
   }).mouseleave( function(){
    $('.panel').stop().animate({opacity:0});
   })
});

I am struggling to make the mouseover ONLY occur on the cell which the mouse is on & I am struggling with how to make the JS work on a div with three class selectors.

Any help is much appreciated

The final application of this script will be used in this context: http://www.zoommarketing.com/jordanswonderfullandofwhat/index.html

Answer 1

Your HTML is incorrect. Fixed it for you here:

<div class="row">

<div class="large-3 small 6 columns">
    <img src='http://www.zoommarketing.com/jordanswonderfullandofwhat/img/smiley-1.jpg'/>
    <div class="panel">Videos and News</div>
</div>
<div class="large-3 small-6 columns">
    <img src='http://www.zoommarketing.com/jordanswonderfullandofwhat/img/smiley-1.jpg'/>
    <div class="panel">Videos and News</div>
</div>

</div>

And here is the new Javascript to only fire on the element that is being hovered over, by using jQuery's this selector:

$( function(){
  $('.large-3').mouseenter( function(){
    $('.panel', this).stop().animate({opacity:1});
  }).mouseleave( function(){
    $('.panel', this).stop().animate({opacity:0});
  })
});

Updated JSFiddle

Answer 2

You are missing a closing div in the HTML. But to fix the JS issue you can use $(this) to target the specific div that you're hovering over. Combined with the .find() function you can target the panel just for that div and show/hide.

$('.large-3').mouseenter(function () {
    $(this).find('.panel').stop().animate({
        opacity: 1
    });
}).mouseleave(function () {
    $(this).find('.panel').stop().animate({
        opacity: 0
    });
})

I've updated your fiddle with the fixed markup and example JS - http://jsfiddle.net/4t4nM/3/