При событии "mouseout"(js) css стиль cursor: pointer не работает

Question

Всем привет.

Проблема следующая: есть картинка img, наведя на неё появляется тёмно-прозрачный блок .portfolio__title у которого есть заголовок и кнопка .picture__title__icon, на неё также можно нажать и появляется другой тёмно-прозрачный блок .picture_desc у которого есть текст и кнопка .picture__desc__icon - она закрывает текущий .picture_desc и снова делает видимым блок .portfolio__title . Так вот, почему наведя на картинку img у .picture__title__icon не появляется css-свойство cursor:pointer, когда в JS присутствует событие mouseout, а когда его нет, у блока .portfolio__title появляется мышка и соответственно у .picture__info__icon появляется нужный курсор.

Убрать mouseout нельзя т.к надо, чтобы при отводе мышки с картинки убирался тёмно-прозрачный блок .portfolio__title.

Сам код:

const pictures = document.querySelectorAll(".portfolio__container img");
for (let pic of pictures) {
  pic.addEventListener("mouseover", function() {
    pic.nextElementSibling.style.display = "block"; // picture__title
  });
  pic.addEventListener("mouseout", function() {
    pic.nextElementSibling.style.display = "none"; // picture__title
  });
}

const picInfo = document.querySelectorAll(".picture__title__icon");
for (let info of picInfo) {
  info.addEventListener("click", function() {
    info.parentElement.nextElementSibling.style.display = "block"; // picture__desc
    info.parentElement.style.display = "none"; // picture__title
  });
}

const picDesc = document.querySelectorAll(".picture__desc__icon");
for (let desc of picDesc) {
  desc.addEventListener("click", function() {
    desc.parentElement.style.display = "none"; // picture__desc
    desc.parentElement.previousElementSibling.style.display = "none"; // picture__title
  });
}

body,
html,
p,
h2 {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

body {
  background-color: black;
}

.content {
  max-width: 1390px;
  width: 100%;
  height: 100vh;
  background-color: blue;
  border: 1px solid red;
  margin: 0 auto;
}

.portfolio__container {
  width: 670px;
  height: 375px;
  position: relative;
}

.portfolio__container img {
  width: 100%;
  height: 100%;
  position: relative;
}

.picture__title {
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 177.5px 273.5px;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}

.picture__title h2 {
  color: #fff;
  font: 36px/39.71px "Acworth";
  font-weight: 700;
}

.picture__title__icon {
  background: url("https://raw.githubusercontent.com/Teoom/art-studio/5601f86193cb997cdcf006831ff4464092889346/art/info.svg") no-repeat center;
  position: absolute;
  top: 25px;
  right: 26px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.active {
  display: block;
}

.picture__desc {
  display: none;
  width: 100%;
  height: 100%;
  padding: 124.5px 86.5px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}

.picture__desc__icon {
  background: url("https://raw.githubusercontent.com/Teoom/art-studio/5601f86193cb997cdcf006831ff4464092889346/art/exit.svg") no-repeat center;
  position: absolute;
  top: 25px;
  right: 26px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.picture__desc h2 {
  font: 20px/25.16px "Geometria";
  font-weight: 400;
  margin-bottom: 21px;
}

.picture__desc p {
  font: 20px/25.16px "Geometria";
  font-weight: 700;
}

<div class="portfolio">
  <div class="portfolio__container">
    <img src="https://raw.githubusercontent.com/Teoom/art-studio/main/art/title_img3.jpg" alt="">
    <div class="picture__title">
      <div class="picture__title__icon"></div>
      <h2>Corrida</h2>
    </div>
    <div class="picture__desc">
      <div class="picture__desc__icon"></div>
      <h2>100#100 Acryl</h2>
      <p>I painted this picture experiencing love, <br> passion, pain for my Beloved, in the picture below <br> in the right corner there is an incision, a wound <br> from which blood flows, like in Corrida
      </p>
    </div>
  </div>
</div>

БЛОГ НА HUSL

При событии "mouseout"(js) css стиль cursor: pointer не работает

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