如何在图像上应用悬停效果

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>

下面是js代码，我正在使用它为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";
});
});

问题是，上面的js代码只适用于最后一个div元素，而不是将这种悬停效果应用于所有元素。

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

那么，我如何通过循环为所有div元素运行它呢？

Answer 1

与其使用javascript使事情变得复杂，不如尝试使用css来获得相同的结果。我举了一个例子，只需一行简单的css，就可以完成18行以上的javascript代码

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

Answer 2

所需的结果应该可以通过纯css实现，而不需要任何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;
}