4

Мне нужно чтобы убирался класс 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>

4
  • может не убирался, а просто менялось свойство? 27 авг 2020 в 9:01
  • Сойдет и этот вариант, просто хотел через classList.remove, но никак не могу прийти к ответу 27 авг 2020 в 9:07
  • 1
    А где сам код JS ?
    – NeedH8
    27 авг 2020 в 9:12
  • В этом то и проблема, сколько бы пытался, не получается, поэтому решил попросить,как примерно должен начинаться код 27 авг 2020 в 9:25

1 ответ 1

4

Это можно сделать "привязавшись" к таким 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>

1
  • 1
    Идеально, как я и хотел, благодарю 27 авг 2020 в 10:16

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.