javascript - 单个重复元素上的​​ JS mouseOver(具有多个类选择器)

Question

我正在为 mouseOver 效果而苦苦挣扎。你可以在这里看到我在做什么:http://jsfiddle.net/4t4nM/1/

这是我正在使用的 HTML 结构

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

我正在尝试构建的功能是，当您将鼠标悬停在“大 3 小 6 列”上时，该特定单元格(不是具有相同类别的其他单元格)中的“面板”div 会经历此动画:

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

我正在努力让鼠标悬停只发生在鼠标所在的单元格上，我正在努力研究如何让 JS 在具有三个类选择器的 div 上工作。

非常感谢任何帮助

这个脚本的最终应用将在这个上下文中使用: http://www.zoommarketing.com/jordanswonderfullandofwhat/index.html

Answer 1

您的 HTML 不正确。在这里为您修复:

<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>

这里是新的 Javascript，通过使用 jQuery 的 this 选择器，它只在鼠标悬停的元素上触发:

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

已更新JSFiddle