如何在圖像上應用懸停效果？

Question

我使用了spotlight包並對其進行了自定義，我想要div中的hover效果，當我懸停它時，會出現search按鈕，當我移除光標時，按鈕會消失。

為此，我在addEventListener中使用mouseover和mouseout事件。

html:

<div class="container">
    <div class="row">
        <div class="col-md-4 column-container">

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

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

            </a>

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

            </button>


        </div>
        <div class="col-md-4 column-container">

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


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

            </a>

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

            </button>


        </div>



    </div>
</div>

以下是我用來通過loop為每個元素構建此邏輯的js代碼。

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";
  });
});

問題是上面的js代碼僅適用於最后一個 div 元素，而不是將此懸停效果應用於所有元素。

樣式.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;
}

那么，如何通過循環為所有div元素運行它？

Answer 1

您可以嘗試使用css來實現相同的結果，而不是使用javascript使事情變得復雜。 我舉了一個例子，用簡單的一行 css 你可以做超過 18 行 javascript 代碼的事情

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

Answer 2

不需要任何 js 的純 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; */
  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;
}