如何使用Javascript在悬停时淡入淡出背景图像？

当我将鼠标悬停在网站上的按钮上时，我希望淡入淡出我的背景图像。我能够以正确的属性显示背景图像，但我无法确定如何淡入淡出（使图像平滑），以及如何淡出除当前悬停的框以外的所有框。如果我能得到任何建议，我将不胜感激

代码笔：

地点：

---

您不能将背景图像与元素内容分开淡入淡出，但可以将图像放置在元素中所有其他内容后面的元素中，然后淡入包含图像的元素：

var-button=document.querySelector（“.button”）；
var back=document.getElementById（“backImg”）；
//设置事件处理程序以更改事件的不透明度
//鼠标进出时的图像容器：
addEventListener（“mouseover”，function（））{
back.style.opacity=0；
});
addEventListener（“mouseout”，function（））{
back.style.opacity=1；
});
.main{
文本对齐：居中；
字号：3em；
字体大小：粗体；
颜色：#ff0；
}
#backImg{
位置：绝对；/*允许将图像容器放置到其自己的层中*/
z索引：-1；/*确保容器位于其他内容后面*/
转换：所有1；/*将所有属性更改配置为在1秒内转换*/
}

在我上空盘旋！
主要内容
元素在哪里？在你的背景中找不到任何地方，因此当然不会设置任何内容。使用CSS而不是JS设置背景图像可能会更好，使用JS的唯一目的是切换一个类，该类决定是否需要显示背景图像。更新后，代码都基于网站，我将一个工作示例导入了画笔。道歉
      document.addEventListener('DOMContentLoaded', function() {

      var btn = document.getElementById('btn1'),
          outerContainer = document.getElementsByClassName('Main-content')[0];
      var btnTwo = document.getElementById('btn2'),
          outerContainer2 = document.getElementsByClassName('Main-content')[0];
      var btnThree = document.getElementById('btn3'),
          outerContainer3 = document.getElementsByClassName('Main-content')[0];

      btn.addEventListener('mouseenter', hover);
      btn.addEventListener('mouseleave', noHover);
      btnTwo.addEventListener('mouseenter', hover2);
      btnTwo.addEventListener('mouseleave', noHover2);
      btnThree.addEventListener('mouseenter', hover3);
      btnThree.addEventListener('mouseleave', noHover3);

      function hover() {
          outerContainer.style.backgroundImage = 'url(https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/59dbd720f5e2317170edb5bf/1507579681913/vegetables-fresh-healthy-food-my-diet-goal-hd.jpg)';
          outerContainer.style.backgroundAttachment = "fixed";
          outerContainer.style.backgroundPosition = "bottom";
          outerContainer.style.backgroundRepeat = "no-repeat";
          outerContainer.style.transition = "opacity .25s ease-in";
      }

      function hover2() {
          outerContainer2.style.backgroundImage = 'url(https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/59dbd7358fd4d2e11c887fc1/1507579706733/deadlift-workout-compound-work-hard-my-diet-goal-hd.jpg)';
          outerContainer.style.backgroundAttachment = "fixed";
          outerContainer.style.backgroundPosition = "bottom";
          outerContainer.style.backgroundRepeat = "no-repeat";
          outerContainer.style.transition = "opacity .25s ease-in";
      }

      function hover3() {
          outerContainer3.style.backgroundImage = 'url(https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/59dbd7514c0dbffb014a14c0/1507579730115/strong-powerful-motivation-healthy-body-my-diet-goal-hd.jpg)';
          outerContainer.style.backgroundAttachment = "fixed";
          outerContainer.style.backgroundPosition = "bottom";
          outerContainer.style.backgroundRepeat = "no-repeat";
          outerContainer.style.transition = "opacity .25s ease-in";
      }

      function noHover() {
          outerContainer.style.backgroundImage = '';
      }

      function noHover2() {
          outerContainer2.style.backgroundImage = '';
      }

      function noHover3() {
          outerContainer3.style.backgroundImage = '';
      }

  });