javascript - 如何检测 jQuery 中每个() 内部元素的悬停？

Question

感谢您查看我的问题。

我试图将鼠标悬停在投资组合项目上，但我需要使用each() 循环它们，因为我需要某种方法来识别每个项目。

我尝试将鼠标悬停在 .recent-work-item 上以显示 .recent-work-item__overlay 的 .show-none类确实 display:none;

hover 和 on.("mouseenter", function(){}) 均不起作用。

这是 HMTL:

<section class="recent-work-item" data-portfolio-id="rwi-<?php echo $i;?>">
<div class="recent-work-item__overlay show-none">
<h3 class="color-white bolder-font"><?php the_title(); ?></h3>
<a href="#" class="color-red">VIEW CASE</a>
</div>
<div class="recent-work-img">
  <img src="<?php echo get_template_directory_uri();?>/assets/img/work1.jpg" class="portrait">
</div>

这是 jQuery:

$.each($('.recent-work-item'), function(){

var thisid = $(this).attr("data-portfolio-id");
console.log(thisid);

$("[data-portfolio-id="+"'"+thisid+"']").on('mouseenter', function(){
   $(thisid).find('.recent-work-item__overlay').removeClass('show-none');
 });

$("[data-portfolio-id="+"'"+thisid+"']").on('mouseleave',function(){
  $(thisid).find('.recent-work-item__overlay').addClass('show-none');
});

});

这不起作用，我无法让悬停正常工作，我只想添加或删除一个类，我可以不在each()中执行此操作吗？

我在 StackOverflow 中进行了彻底的研究，但找不到答案。我真的非常感谢我能在这方面获得的任何帮助。

Answer 1

我已经在我的codepen中测试了你的代码，问题是你应该使用$(this)而不是使用$(thisid)

$.each($('.recent-work-item'), function(){

  var thisid = $(this).attr("data-portfolio-id");

  $("[data-portfolio-id="+"'"+thisid+"']").on('mouseenter', function(){
    $(this).find('.recent-work-item__overlay').removeClass('show-none');
  });

  $("[data-portfolio-id="+"'"+thisid+"']").on('mouseleave',function(){
    $(this).find('.recent-work-item__overlay').addClass('show-none');
  });

});

这里看看我的codepen