JS - 鼠标悬停时隐藏图标和显示文本

Question

我在蓝色框中有一个图标列表，我试图隐藏图标+当鼠标在目标框上时显示目标框的一些文本。
[当前][1]

<div class="offer-icons">
      <ul class="icons">
        <li><a href="https://www.google.com" class="icon-img"><i class="fas fa-tag"></i></a></li>
        <li><a href="https://www.google.com"> <i class="fas fa-landmark"></i></a></li>
        <li><a href="https://www.google.com"> <i class="fas fa-industry"></i></a></li>
        <li><a href="https://www.google.com"> <i class="fas fa-first-aid"></i></a></li>
      </ul>
    </div>

到目前为止，我拥有的：- 工作：将鼠标悬停时更改图标容器的不透明度- 不起作用：隐藏图标("i"(- 在中心显示任何类型的文本

        const iconsImages = document.querySelectorAll("icon-img");
        const inconsMove = () =>{
        const boxes = document.querySelectorAll("li");
        boxes.forEach(function(elem) {
            elem.addEventListener("mouseover", function() {
            elem.classList.add("test");
            iconsImages.style.visibility = "hidden";
        });
        elem.addEventListener("mouseout", function() {
            elem.classList.remove("test");
        });
    });
    }

  [1]: https://i.stack.imgur.com/Aqabv.png

Answer 1

您可以将图标和文本放在锚点内，并在悬停时切换文本不透明度。假设您希望文本位于图标上。

我也赞成mouseenter和mouseleave，因为在这种情况下它会更有效。

const boxes = document.getElementsByClassName("icon-img");
Array.from(boxes).forEach((elem) => {
  elem.addEventListener("mouseenter", (event) => {
    event.target.classList.add('in')
  })
  elem.addEventListener("mouseleave", (event) => {
    event.target.classList.remove('in')
  })
});

.icons {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.icons > li {
  padding: .25rem;
}
.icon-img {
  display: block;
  background-color: rgb(8,22,70);
  height: 10rem;
  width: 10rem;
  position: relative;
  text-decoration: none;
}
.icon-img > .fas {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: rgb(112,123,155);
  font-size: 4rem;
}
.icon-img > .text {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(112,123,155,.8);
  color: #fff;
  opacity: 0;
  transition: opacity .35s ease-in-out;
}
.icon-img.in > .text {
  opacity: 1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/>
<div class="offer-icons">
  <ul class="icons">
    <li>
      <a href="https://www.google.com" class="icon-img">
        <i class="fas fa-tag"></i>
        <div class="text">
          Tag
        </div>
      </a>
    </li>
    <li>
      <a href="https://www.google.com" class="icon-img">
        <i class="fas fa-landmark"></i>
        <div class="text">
          Landmark
        </div>
      </a>
    </li>
    <li>
      <a href="https://www.google.com" class="icon-img">
        <i class="fas fa-industry"></i>
        <div class="text">
          Industry
        </div>
      </a>
    </li>
    <li>
      <a href="https://www.google.com" class="icon-img">
        <i class="fas fa-first-aid"></i>
        <div class="text">
          First Aid
        </div>
      </a>
    </li>
  </ul>
</div>