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

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

＆＃13;

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;
});

＆＃13;

.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 */
}

＆＃13;

<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>

＆＃13;

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

1 个答案: