无法在 Javascript 中使用鼠标悬停事件侦听器更改页面中的图像可见性 ("hidden"/"visible")

Question

大家好。我一直在尝试添加到我的项目鼠标悬停事件侦听器，但没有成功。我一遍又一遍地重做这件事，试图简化它，但仍然无法做到。所以，我归结为两个对象（图像）：

   <div id="box" class="main__box">
    <img src="/images/illustration-box-desktop.svg" alt="What's in the box?" >
  </div>
  <div id="boxm" class="main__box__moved">
    <img src="/images/illustration-box-desktop.svg" alt="What's in the box?" >
  </div>

这是同一张图片，但我在 scss 中设置的位置不同。我尝试编写一个函数，如果用户将鼠标悬停在标签上，它会明显改变其中两个：box = visible，boxm = hidden，反之亦然：

<label for="question__1">How many team members can I invite? <span><img src="/images/icon-arrow-down.svg" alt="Arrow-Down"></span></label>

它们不是父元素和子元素，而是在同一个页面中。所以，我尝试了简单的功能（出错的可能性较小）：

var boxmoved = document.getElementById("boxm");
var boxmain = document.getElementById("box");
var labels = document.querySelectorAll('labels');

var func = function () {
  boxmoved.style.visibility = "visible";
  boxmain.style.visibility = "hidden";
}

var funks = function () {
  boxmoved.style.visibility = "hidden";
  boxmain.style.visibility = "visible";
}

labels.addEventListener("mouseenter", func);
labels.addEventListener("mouseleave", funks);

但是该功能不起作用。我不明白为什么以及如何让它发挥作用。

我真的希望得到你们的帮助，在此先感谢你们。

Answer 1

它有效，但我不确定是否是最佳实践。

window.addEventListener("DOMContentLoaded", function() {

  var boxmoved = document.getElementById("boxm");
  var boxmain = document.getElementById("box");
  boxmoved.style.visibility = "visible";
  boxmain.style.visibility = "hidden";

  var labels = document.getElementsByTagName("label");
  var labelsList = Array.prototype.slice.call(labels);
  
  labelsList.forEach(l=>{
    l.addEventListener("mouseenter", func);
    l.addEventListener("mouseleave", funks);
  })
    
})

  var func = function () {
    var boxmoved = document.getElementById("boxm");
    var boxmain = document.getElementById("box");
    boxmoved.style.visibility = "visible";
    boxmain.style.visibility = "hidden";
  }

  var funks = function () {
    var boxmoved = document.getElementById("boxm");
    var boxmain = document.getElementById("box");
    boxmoved.style.visibility = "hidden";
    boxmain.style.visibility = "visible";
  }

  <div id="box" class="main__box">
    <img src="/images/illustration-box-desktop.svg" alt="What's in the box?" >
  </div>
  <div id="boxm" class="main__box__moved">
    <img src="/images/illustration-box-desktop.svg" alt="What's in the box?" >
  </div>



<label for="question__1">How many team members can I invite? <span><img src="/images/icon-arrow-down.svg" alt="Arrow-Down"></span></label>

无法在 Javascript 中使用鼠标悬停事件侦听器更改页面中的图像可见性 ("hidden"/"visible")

Can't make change image visibility ("hidden"/"visible") in the page with mouseover event listener in Javascript

javascript

css

sass

mouseevent