Question

感谢您查看我的问题。

我正在尝试将鼠标悬停在项目组合项目上，但我需要使用each（）循环遍历它们，因为我需要一些方法来识别每个项目。

我正试图将鼠标悬停在 .recent-work-item 上，以显示 .recent-work-item__overlay .show-none class display：none;

悬停和 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');
});

});

这不起作用，我无法让悬停工作，我想要做的就是添加或删除一个类，我不能在每个（）中执行此操作。

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

Answer 1

我已在我的codepen中测试您的代码，问题应该使用npm rebuild而不是$(this)

$(thisid)

在这里查看我的codepen

Answer 2

这里我添加了一个示例，说明如何使用CSS来显示/隐藏元素。它可能无法为您提供问题的准确答案，但它可以帮助您根据您的要求更改样式表。

基本上，根据评论中的讨论，我认为你不需要javascript来按照你需要的方式设计页面。

＆＃13;

.container {
  padding: 10px;
  border: 1px solid gray;
}

.container > .hideOnHover {
  display: block;
}

.container > .showOnHover {
  display: none;
}

.container:hover > .hideOnHover {
  display: none;
}

.container:hover > .showOnHover {
  display: block;
}

＆＃13;

<div class="container">
  <div class="hideOnHover">
    This text will be hidden on hover.
  </div>
  <div class="showOnHover">
    This text will be shown on hover.
  </div>
</div>

＆＃13;

如何在jQuery中检测hover到each（）内部的元素？

2 个答案: