Поддерживать класс, назначенный событием наведения мыши, когда мышь отсутствует - PullRequest
Новая
       5

Поддерживать класс, назначенный событием наведения мыши, когда мышь отсутствует

0 голосов
/ 17 октября 2018

У меня есть раздел с 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>

Ответы [ 3 ]

0 голосов
/ 17 октября 2018

Смотри ниже.Добавление прослушивателя событий для каждого изображения. 

//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>
0 голосов
/ 17 октября 2018

Вы можете использовать события mousein() и mouseleave() вместо mouseover() - это дает вам больше гибкости и позволяет «зависанию» оставаться, когда мышь снова уходит

0 голосов
/ 17 октября 2018

проверить, является ли цель события изображением.Добавление / удаление класса работает только тогда, когда мышь находится на элементе с классом 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>
...