Не могу удалить класс при наведении мыши на квадрат

Question

Мне нужно чтобы убирался класс hide у <i>, когда я навожу мышкой на div.workBox, но сколько бы не старался, не могу это сделать

.workBox {
  display: flex;
  flex: 0 1 25%;
  justify-content: center;
  align-items: center;
  background-color: #dddddd;
  height: 320px;
  color: white;
}

.workGray {
  background-color: #838383;
}

.workBox:hover {
  background-color: #252525;
}

.hide {
  visibility: hidden;
}

<div class="work container" id="work">
  <div class="workBox workGray"><i class="workIcon hide pe-7s-look pe-4x pe-fw "></i></div>
  <div class="workBox">3 <i class="workIcon hide pe-7s-look pe-4x pe-fw "></i></div>
  <div class="workBox workGray">1 <i class="workIcon hide pe-7s-look pe-4x pe-fw "></i></div>
  <div class="workBox">1 <i class="workIcon hide pe-7s-look pe-4x pe-fw "></i></div>
  <div class="workBox">2<i class="workIcon hide pe-7s-look pe-4x pe-fw "></i></div>
  <div class="workBox workGray"><i class="workIcon hide pe-7s-look pe-4x pe-fw "></i> </div>
  <div class="workBox">2</div>
  <div class="workBox workGray">2</div>
</div>

Answer 1

Это можно сделать "привязавшись" к таким event'ам как mouseover и mouseout:

const handleHover = event => {
  const target = event.target.querySelector("i")
  target.classList.toggle("hide")
  console.log(target)
}

document.querySelectorAll(".workBox").forEach(item => {
  item.addEventListener("mouseover", handleHover)
  item.addEventListener("mouseout", handleHover)
})

.workBox {
  display: flex;
  flex: 0 1 25%;
  justify-content: center;
  align-items: center;
  background-color: #dddddd;
  height: 320px;
  color: white;
}

.workGray {
  background-color: #838383;
}

.workBox:hover {
  background-color: #252525;
}

.hide {
  visibility: hidden;
}

<div class="work container" id="work">
  <div class="workBox workGray"><i class="workIcon hide pe-7s-look pe-4x pe-fw "></i></div>
  <div class="workBox">3 <i class="workIcon hide pe-7s-look pe-4x pe-fw "></i></div>
  <div class="workBox workGray">1 <i class="workIcon hide pe-7s-look pe-4x pe-fw "></i></div>
  <div class="workBox">1 <i class="workIcon hide pe-7s-look pe-4x pe-fw "></i></div>
  <div class="workBox">2<i class="workIcon hide pe-7s-look pe-4x pe-fw "></i></div>
  <div class="workBox workGray"><i class="workIcon hide pe-7s-look pe-4x pe-fw "></i> </div>
  <div class="workBox">2</div>
  <div class="workBox workGray">2</div>
</div>

БЛОГ НА HUSL

Не могу удалить класс при наведении мыши на квадрат

Ответы (1 шт):