更新了JSFiddle

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>

我试图构建的功能是当你将鼠标放在＆＃34;大3小6列＆＃34; ＆＃34;面板＆＃34;特定单元格中的div（不是具有相同类的其他单元格）通过此动画：

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

我正在努力使鼠标悬停仅发生在鼠标所在的细胞上。我正在努力解决如何使用三个类选择器使JS工作。

非常感谢任何帮助

此脚本的最终应用程序将在此上下文中使用： 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＆＃39; this选择器触发正在悬停的元素：

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

更新了JSFiddle

Answer 2

您缺少HTML中的结束div。但是要修复JS问题，你可以使用$（this）来定位你正在盘旋的特定div。与.find（）函数结合使用，您可以仅为该div定位面板并显示/隐藏。

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

我用固定标记和示例JS更新了你的小提琴 - http://jsfiddle.net/4t4nM/3/

JS mouseOver在一个重复元素上（有多个类选择器）

2 个答案:

更新了JSFiddle