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

Question

当我将鼠标悬停在网站上的按钮上时，我希望淡入淡出背景图像。 我能够以正确的属性显示背景图像，但是我无法弄清楚如何淡入和淡出（使图像感觉平滑）以及如何淡化除一个框以外的所有框多数民众赞成目前悬停。 如果有任何建议，我将不胜感激！

Codepen： https ：//codepen.io/chriskaram/pen/ZXjjqj

网站： https ： //mydietgoal.com/mydietgoal-features-and-plans

      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 = '';
      }

  });

Answer 1

您将无法独立于元素的内容淡入淡出背景图像，但是您可以将图像放置在其自己的元素中，该元素位于元素中所有其他内容的后面，然后淡入包含该图像的元素：

 var button = document.querySelector(".button"); var back = document.getElementById("backImg"); // Set up event handlers to change the opacity of the // image container when mousing in and out: button.addEventListener("mouseover", function(){ back.style.opacity = 0; }); button.addEventListener("mouseout", function(){ back.style.opacity = 1; }); 

 .main { text-align:center; font-size:3em; font-weight:bold; color:#ff0; } #backImg { position:absolute; /* Allow the image container to be placed into its own layer */ z-index:-1; /* Make sure that container is behind other content */ transition:all 1s; /* Configure all property changes to transition over 1 second */ } 

 <div class="main"> <div id="backImg"> <img src="http://www.planwallpaper.com/static/images/23-3d-beach-sand-wallpaper.jpg"> </div> <button class="button">Hover over me!</button> </div>