当鼠标离开时，维护一个由悬停事件分配的类答案

【问题标题】：Mantain a class assigned by a hover event when the mouse is out当鼠标离开时，维护一个由悬停事件分配的类
【发布时间】：2018-10-17 20:41:22
【问题描述】：

我有一个部分，里面有 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>

【问题讨论】：

“我想要一个具有初始状态的图像，在其他图像之上”为什么不能用 css 完成？
请解释一下。可以这样做，但是当您悬停其他图像时，必须从初始图像中删除该状态。
啊，是的，据我所知，删除你需要 java 脚本。

标签： javascript html css hover

【解决方案1】：

检查事件目标是否为图像。仅当鼠标位于类 portfolio-single-image 的元素上时，添加/删除类才有效。

//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){
 if(e.target.classList.contains('portfolio-single-image')){
    imagesArr.map((image)=> image.classList.remove("active-image") );
   
    e.target.classList.add("active-image");
    }
});

.active-image {
border:1px solid red;
display:block;
}

<main>
    <img class="portfolio-single-image image1 active-image" src="X" alt="">
    <img class="portfolio-single-image image2" src="https://via.placeholder.com/350x150" alt="">
    <img class="portfolio-single-image image3" src="https://via.placeholder.com/350x150" alt="">
    <img class="portfolio-single-image image4" src="https://via.placeholder.com/350x150" alt="">
</main>

【讨论】：

这确实有效...介意解释一下原因吗？在允许的情况下接受。

【解决方案2】：

见下文。为每个图像添加一个事件监听器。

//Getting all the images in an Array:
const images = [...document.querySelectorAll(".portfolio-single-image")];
//Listen for hover event for each image
images.map( image => image.addEventListener("mouseover", function(e) {
    // Reset border
    images.map( image => image.classList.remove("active-image") );
    // Set border for correct image
    e.target.classList.add("active-image");
  })
);

.active-image {
border: thin solid red;
}

<main>
    <img class="portfolio-single-image" src="https://via.placeholder.com/50x50" alt="">
    <img class="portfolio-single-image" src="https://via.placeholder.com/50x50" alt="">
    <img class="portfolio-single-image" src="https://via.placeholder.com/50x50" alt="">
    <img class="portfolio-single-image" src="https://via.placeholder.com/50x50" alt="">
</main>

【讨论】：

【解决方案3】：

您可以使用mousein() 和mouseleave() 事件来代替mouseover() - 这为您提供了更大的灵活性，并允许鼠标再次离开时保持“悬停状态”

【讨论】：