javascript - 优化 JS 代码以在悬停时显示某些 Div

Question

我当前的目标是在图像区域聚焦/悬停时显示某些段落元素。默认显示值应为“无”。

我让代码可以工作，但只有当用户将鼠标直接悬停在元素上时。当图像标记的区域突出显示时，我如何最佳地隐藏/显示此段落元素？

以下是我当前的代码设置。

var projImg = document.getElementsByClassName("projImg");
var projDesc = document.getElementsByClassName("projDesc");


var opacityHalf = function() {
  this.style.opacity = '0.5';
};

var opacityFull = function() {
  this.style.opacity = '1.0';
}

var displayP = function() {
  this.style.display = 'block';
}

var hideP = function() {
  this.style.display = 'none';
}

for (i = 0; i < projImg.length; i++) {
  projImg[i].addEventListener("mouseover" || "touchStart", opacityHalf, false);
}

for (i = 0; i < projImg.length; i++) {
  projImg[i].addEventListener("mouseout" || "touchEnd", opacityFull, false);
}

for (i = 0; i < projDesc.length; i++) {
  projDesc[i].addEventListener("mouseover" || "touchStart", displayP, false);
}

<div class="projectContain">
  <div class="h3Box">
    <h3>Project<br>Description</h3>
  </div>
  <img class="projImg" src="https://picsum.photos/300/200" alt="Description">
  <p class="projDesc">Paragraph text goes here.</p>
</div>

Answer 1

你不需要JS来做这个，理智的可以用css来完成

.projDesc{
  display:none;
}

.projImg:hover + .projDesc,.projImg:focus + .projDesc{
  display:block;
}

这里 .projImg:hover + .projDesc 表示当 .projImg:hover 发生时选择相邻的 .projDesc 和