How to apply loop in addEventListener to style elements?-CodePudding

I have used spotlight package and customized it,i want the hover effect in div, when i hover it, the search button appears, when i remove my cursor,the button disappears.

For this i am using mouseover and mouseout event in addEventListener.

Html:

<div >
    <div >
        <div >

            <a href="https://www.google.com">

                <img src="demo/gallery/brooklyn-bridge-1791001-thumb.jpg" alt="">

            </a>

            <button type='button' onclick="showGallery(1)"  data-bs-toggle="tooltip"
                data-bs-placement="bottom" title="bottom">
                <i  aria-hidden="true"></i>

            </button>


        </div>
        <div >

            <a href="https://www.google.com">


                <img  src="https://source.unsplash.com/random" alt="">

            </a>

            <button type='button' onclick="showGallery(4)"  data-bs-toggle="tooltip"
                data-bs-placement="bottom" title="bottom">
                <i  aria-hidden="true"></i>

            </button>


        </div>



    </div>
</div>

js code which i am using to build this logic for every element through loop.

document.querySelectorAll(".column-container").forEach((item, index) => {
  console.log(item);
  search = document.querySelectorAll(".main-search-btn")[index];
  console.log(search);

  item.addEventListener("mouseover", () => {
    search.style.display = "initial";
  });
});
document.querySelectorAll(".column-container").forEach((item, index) => {
  search = document.querySelectorAll(".main-search-btn")[index];
  console.log(search);

  item.addEventListener("mouseout", () => {
    search.style.display = "none";
  });
});

The problem is that the js is only working for last div element rather applying this hover effect on all the elements.

style.css

.fa-search {
  color: white !important;
}
div.column-container {
  position: relative;
  /* border: 2px solid blue; */
}
div.column-container a img {
  width: 100% !important;
  border: 2px solid blue;
}

.main-search-btn {
  /* border: 2px solid blue; */
  display: none;
  background-color: #000 !important;
  top: -3px;
  right: 10px;
  border-radius: 0px;
  z-index: 10000;
  position: absolute;
}

So, how can i run it for all the div elements, actually i have to run the loop for this project in django.

CodePudding user response：

Rather than making things complex with javascript you can try using css to achieve the same result. I have given an example where with a simple one line of css you can do what it took more than 18 lines of javascript code

.column-container:hover .main-search-button {
    display: block;
}

CodePudding user response：

The desired result should be achievable by pure css without any js.

.fa-search {
  color: white !important;
}
div.column-container {
  position: relative;
  /* border: 2px solid blue; */
}
div.column-container a img {
  width: 100% !important;
  border: 2px solid blue;
}

.main-search-btn {
  /* border: 2px solid blue; */
  background-color: #000 !important;
  top: -3px;
  right: 10px;
  border-radius: 0px;
  z-index: 10000;
  position: absolute;
}

div.column-container .main-search-btn {
  display: none;
}

div.column-container:hover .main-search-btn {
  display: initial;
}