Javascript 当鼠标离开时，捕捉由悬停事件指定的类

我有一个里面有4张图片的部分。我希望悬停的图像得到一个类，因此它显示在其他类的顶部。我之所以不单独使用CSS，是因为我想要一个具有该初始状态的图像位于其他图像之上

我很喜欢

mouseover

，但我希望类保持在最后一个悬停的图像中，而不是像单击事件那样在鼠标退出时消失

//Getting all the images in an Array:
const imagesArr = Array.from( document.querySelectorAll(".portfolio-single-image") );

//The container where the images are:
const mainGrid = document.querySelector("main");

//The event listener where the class is assigned and removed from the other elements:
mainGrid.addEventListener("mouseover", function(e){
    imagesArr.map((image)=> image.classList.remove("active-image") );
    e.target.classList.add("active-image");
});

HTML：

<main>
    <img class="portfolio-single-image image1 active-image" src="X" alt="">
    <img class="portfolio-single-image image2" src="X" alt="">
    <img class="portfolio-single-image image3" src="X" alt="">
    <img class="portfolio-single-image image4" src="X" alt="">
</main>

---

检查事件目标是否为图像。只有当鼠标位于类为“公文包单个图像”的元素上时，添加/删除类才有效

//获取数组中的所有图像：
const imagesar=Array.from（document.queryselectoral（“.portfolio single image”）；
//图像所在的容器：
const mainGrid=document.querySelector（“main”）；
//事件侦听器，其中类被分配并从其他元素中移除：
mainGrid.addEventListener（“鼠标悬停”，函数（e）{
if（e.target.classList.contains（'portfolio-single-image'））{
imagesar.map（（image）=>image.classList.remove（“活动图像”）；
e、 target.classList.add（“活动映像”）；
}
});
。活动图像{
边框：1px纯红；
显示：块；
}
检查事件目标是否为图像。只有当鼠标位于类为“公文包单个图像”的元素上时，添加/删除类才有效


//获取数组中的所有图像：
const imagesar=Array.from（document.queryselectoral（“.portfolio single image”）；
//图像所在的容器：
const mainGrid=document.querySelector（“main”）；
//事件侦听器，其中类被分配并从其他元素中移除：
mainGrid.addEventListener（“鼠标悬停”，函数（e）{
if（e.target.classList.contains（'portfolio-single-image'））{
imagesar.map（（image）=>image.classList.remove（“活动图像”）；
e、 target.classList.add（“活动映像”）；
}
});
。活动图像{
边框：1px纯红；
显示：块；
}
见下文。向每个图像添加事件侦听器


//获取数组中的所有图像：
const images=[…document.querySelectorAll（“.portfolio single image”）；
//侦听每个图像的悬停事件
images.map（image=>image.addEventListener（“mouseover”），函数（e）{
//重置边界
images.map（image=>image.classList.remove（“活动图像”）；
//为正确的图像设置边框
e、 target.classList.add（“活动映像”）；
})
);
。活动图像{
边框：薄而实的红色；
}
见下文。向每个图像添加事件侦听器


//获取数组中的所有图像：
const images=[…document.querySelectorAll（“.portfolio single image”）；
//侦听每个图像的悬停事件
images.map（image=>image.addEventListener（“mouseover”），函数（e）{
//重置边界
images.map（image=>image.classList.remove（“活动图像”）；
//为正确的图像设置边框
e、 target.classList.add（“活动映像”）；
})
);
。活动图像{
边框：薄而实的红色；
}

您可以使用
mousein（）
和
mouseleave（）
事件而不是
mouseover（）
——这为您提供了更大的灵活性，并允许在鼠标再次离开时保持“悬停状态”
您可以使用
mousein（）
和
mouseleave（）
事件而不是
mouseover（）
-这给了您更大的灵活性，并允许在鼠标再次离开时保持“悬停状态”
，确实有效…介意解释一下原因吗？在允许的情况下接受。这确实有效……介意解释一下原因吗？在允许的情况下接受。“我想要一个具有初始状态的图像，位于其他图像之上”为什么不能用css来完成？请解释一下。这是可以做到的，但当你悬停在其他图像上时，该状态必须从初始图像中删除。啊，是的，就我所知，删除需要java脚本。“我想要一个具有该初始状态的图像，位于其他图像之上”为什么不能用css来完成？请解释一下。这是可以做到的，但是当你悬停在其他图像上时，这个状态必须从初始图像中删除。啊，是的，就我所知，删除需要java脚本。