Opacity по onmouseover в нескольких "дивах"

Question

Есть более двух блоков в дивах, находится они могут в разных слоях. Нужно что-бы при наведении курсора: на блок1 проявлялся блок3, на блок2 — блок4, и так далее. Собственно решение я сделал.

document.getElementById('block1').onmouseover = fuin1;
document.getElementById('block1').onmouseout = fuout1;
document.getElementById('block2').onmouseover = fuin2;
document.getElementById('block2').onmouseout = fuout2;

function fuin1() {
  document.getElementById('block3').style.opacity = '1';
}

function fuout1() {
  document.getElementById('block3').style.opacity = '0';
}

function fuin2() {
  document.getElementById('block4').style.opacity = '1';
}

function fuout2() {
  document.getElementById('block4').style.opacity = '0';
}

body {
  background-color: #242424;
  background-image: url();
}

p {
  color: #f4f4f4;
  font-size: medium;
  font-weight: 700;
  text-shadow: (2 2 0 2 black);
  text-transform: capitalize;
  margin: 0.4em;
}

div {
  display: flex;
  width: 4em;
  height: 4em;
  position: fixed;
  margin: 1em;
}

#block1,
#block2 {
  cursor: pointer;
  border: ridge;
  border-color: grey;
}

#block1 {
  background: cyan;
  top: 1em;
  left: 4em;
}

#block2 {
  background: green;
  top: 6em;
  left: 4em;
}

#block3 {
  background: darkcyan;
  top: 1em;
  left: 9em;
  opacity: 0;
}

#block4 {
  background: darkgreen;
  top: 6em;
  left: 9em;
  opacity: 0;
}

<div>
  <div id="block1">
    <p>
      block1
    </p>
  </div>
</div>
<div>
  <div id="block2">
    <p>
      block2
    </p>
  </div>
</div>
<div id="block3">
  <p>
    block3
  </p>
</div>
<div>
  <div>
    <div id="block4">
      <p>
        block4
      </p>
    </div>
  </div>
</div>

Но мне кажется что есть более правильное решение с обобщённой функцией. Пробовал через классы — не выходит. Подскажите пожалуйста.

Answer 1

Примерно так:

<div>
  <div id="block1" data-target-id="block3">
    <p>
      block1
    </p>
  </div>
</div>
<div>
  <div id="block2" data-target-id="block4">
    <p>
      block2
    </p>
  </div>
</div>
<div id="block3">
  <p>
    block3
  </p>
</div>
<div>
  <div>
    <div id="block4">
      <p>
        block4
      </p>
    </div>
  </div>
</div>

const onMouseEnter = (target) => {
  target.style.opacity = 1;
};

const onMouseLeave = (target) => {
  target.style.opacity = 0;
};



['block1', 'block2'].forEach((id) => {
  const node = document.getElementById(id);
  const target = document.getElementById(node.dataset.targetId);
  
  node.addEventListener('mouseenter', () => onMouseEnter(target));
  node.addEventListener('mouseleave', () => onMouseLeave(target));
});

Если Вам действительно нужно, чтобы при наведении на элемент всплывал рядом ещё один, то можно просто сверстать немного по-другому и сделать через CSS :hover.

БЛОГ НА HUSL

Opacity по onmouseover в нескольких "дивах"

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