Как определить элемент, на который я нажал, из массива

Question

Я пытаюсь сделать этот проект, где у меня есть куча фотографий. Я хочу сделать так, чтобы при наведении курсора на фотографию элемент отображался как блок (по умолчанию он отсутствует). Я не могу понять, как сделать это ... все, что я использовал, сделало так, чтобы все элементы i отображались. Это код javaScript.

JavaScript

var poza = document.querySelectorAll(".poza");
var plus = document.querySelectorAll(".plus");
poza.forEach(function (e) {
    e.addEventListener("mouseover", function () {
        for (var i = 0; i < plus.length; i++)
            plus[i].style.display = "block"
    })
    e.addEventListener("mouseout", function () {
        for (var i = 0; i < plus.length; i++)
            plus[i].style.display = "none"
    })
})

HTML

            <div class="row poze">
                <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
                    <img class="poza" src="https://images.unsplash.com/photo-1534438327276-14e5300c3a48?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                    <i class="plus fas fa-plus-square"></i>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
                    <img class="poza" src="https://images.unsplash.com/photo-1571902943202-507ec2618e8f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                    <i class="plus fas fa-plus-square"></i>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
                    <img class="poza" src="https://images.unsplash.com/photo-1540497077202-7c8a3999166f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                    <i class="plus fas fa-plus-square"></i>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
                    <img class="poza" src="https://images.unsplash.com/photo-1534258936925-c58bed479fcb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                    <i class="plus fas fa-plus-square"></i>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
                    <img class="poza" src="https://images.unsplash.com/photo-1517343985841-f8b2d66e010b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                    <i class="plus fas fa-plus-square"></i>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
                    <img class="poza" src="https://images.unsplash.com/photo-1561140895-9d144461935e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
                    <i class="plus fas fa-plus-square"></i>
                </div>

Answer 1

Простой трюк, который вы можете сделать, это при вводе события мыши добавить класс скажем hover-effect в каждый элемент в массиве элементов poza. Затем в css используйте следующее правило

i {
  display: none;
}

.hover-effect+i {
 display: 'block';        
}

Удалите мышью класс. Этот подход будет аккуратным и чистым.

(см. Документацию по + selector)

Answer 2

Вы можете добиться этого, используя самовыполняющуюся функцию:

var poza = document.querySelectorAll(".poza");
var plus = document.querySelectorAll(".plus");

poza.forEach(function (e, i) {
    e.addEventListener("mouseover", (function (newI) {
        return function() {
            plus[newI].style.display = "block"
        }
    })(i))
    e.addEventListener("mouseout", (function (newI) {
        return function() {
            plus[newI].style.display = "none"
        }
    })(i))
})

Answer 3

Вы можете получить его из addEventListener как event.target, одно из возможных решений должно быть таким:

poza.forEach(function (e) {
    e.addEventListener("mouseover", function (event) {
       event.target.style.display = "block"
    })
    e.addEventListener("mouseout", function (event) {
       event.target.style.display = "none"
    })
})

Посмотрите, поможет ли это; D