Javascript 如何检测jQuery中每个（）内元素的悬停？

谢谢你看我的问题

我正在尝试将鼠标悬停在公文包项上，但我需要使用each（）遍历它们，因为我需要某种方法来标识每个项

我试图将鼠标悬停在上。最近的工作项显示。最近的-work-item\uu覆盖该.show none类显示：none

悬停和开启。（“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>

$.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进行了彻底的研究，但没有找到答案。我将非常感谢在这方面能得到的任何帮助。

我已经在我的代码笔中测试了您的代码，您应该使用

$（此）

而不是使用

$（此ID）

$。每个（$（'.最近的工作项'），函数（）{
var thisid=$（this.attr（“数据组合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_uuoverlay'）.addClass（'show-none'）；
});
});

---

这里看看我的

我已经在我的代码笔中测试了你的代码，你应该使用

$（this）

而不是使用

$（thisid）

$。每个（$（'.最近的工作项'），函数（）{
var thisid=$（this.attr（“数据组合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_uuoverlay'）.addClass（'show-none'）；
});
});

---

看看我的

这里我添加了一个示例，演示如何使用CSS显示/隐藏元素。它可能不会为您的问题提供确切的答案，但它将帮助您根据需要更改样式表

从本质上讲，根据评论中的讨论，我认为您不需要javascript来按照需要的方式设计页面

.container{
填充：10px；
边框：1px纯色灰色；
}
.container>.hideOnHover{
显示：块；
}
.container>.showOnHover{
显示：无；
}
.container:hover>.hideOnHover{
显示：无；
}
.container:hover>.showOnHover{
显示：块；
}

此文本将在悬停时隐藏。
此文本将在悬停时显示。

这里我添加了一个示例，演示如何使用CSS显示/隐藏元素。它可能不会为您的问题提供确切的答案，但它将帮助您根据需要更改样式表

从本质上讲，根据评论中的讨论，我认为您不需要javascript来按照需要的方式设计页面

.container{
填充：10px；
边框：1px纯色灰色；
}
.container>.hideOnHover{
显示：块；
}
.container>.showOnHover{
显示：无；
}
.container:hover>.hideOnHover{
显示：无；
}
.container:hover>.showOnHover{
显示：块；
}

此文本将在悬停时隐藏。
此文本将在悬停时显示。

$。每个（$（“.最近的工作项”）

错误您可以使用

：hover

属性并将

show none

的样式移动到

recent-work-item\uuu覆盖：hover

@brk为什么错误？@NisargShah我正试图将鼠标悬停在一个元素上以显示另一个元素，这是行不通的。这会起作用。您能编辑问题以突出显示可见和隐藏的元素吗悬停时有n个元素？

$。每个（$（“.最近的工作项”）

错误您可以使用

：hover

属性并将

show none

的样式移动到

recent-work-item\uuu覆盖：hover

@brk为什么错误？@NisargShah我正试图将鼠标悬停在一个元素上以显示另一个元素，这是行不通的。这会起作用。您能编辑问题以突出显示可见和隐藏的元素吗n元素悬停？非常感谢！非常感谢！