在悬停时使用 javascript 或 css 使背景图像淡入淡出

Question

到目前为止，我已经能够做到，当光标悬停在 div 上时，正文中会出现一个背景图像。我需要为此添加淡入淡出动画。我一直在这里寻找解决方案，但一直无法解决。我在 javascript.

方面没有任何经验

enter code here
<script>


    changeBgImage = () => {
        document.body.style.backgroundImage = "url('../Images/Background/wraithback.jpg')";
        console.log("working")




    }
    ogBgImage = () => {
        document.body.style.backgroundImage = "url('../Images/Background/black.jpg')";
        console.log("working")
    }


</script>

<style>
    body {
        background-image: url('../Images/Background/black.jpg');
    }
</style>
<body>
<div class="gwraith"><a href="../Legends/wraith.html ">
                    <img src="../Images/Legends_pics/wraithchibi.png" width="130vw" class="wraith"
                        onmouseover="changeBgImage();" onmouseout="ogBgImage();">
                </a>
</body>

Answer 1

向 body 标签添加转换规则。同样可以在 css 中完成，而无需 javascript.

function changeBgImage() {
  document.body.style.backgroundImage = "url('https://s1.1zoom.ru/big0/284/Summer_Pond_Fence_Trees_496376.jpg')";
}

function ogBgImage() {
  document.body.style.backgroundImage = "url('https://pristor.ru/wp-content/uploads/2017/02/leto12.jpg')";
}

body {
  background-image: url('https://pristor.ru/wp-content/uploads/2017/02/leto12.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  
  transition: all 0.7s linear;
  
}

<body>
  <div class="gwraith">
    <a href="../Legends/wraith.html">
    <img src="https://begin-english.ru/img/word/refresh.jpg" width="130vw" class="wraith"
                            onmouseover="changeBgImage();" onmouseout="ogBgImage();">
    </a>
  </div>
</body>

Answer 2

我没能用 body 做到这一点。但是您可以拉伸底层 div 并更改其不透明度。

const appDiv = document.getElementById("app");

appDiv.addEventListener("mouseover", showBodyBackground);
appDiv.addEventListener("mouseout", hideBodyBackground);

function showBodyBackground() {
  document.getElementById("bg").classList.add("hidden");
}

function hideBodyBackground() {
  document.getElementById("bg").classList.remove("hidden");
}

.visible {
  background: url('https://www.bouwendnederland.nl/media/6502/rijnhaven-impressie-602-x-402.jpg');
  transition: opacity 1.5s linear;
  opacity: 1;
}

.hidden {
  opacity: 0;
}

.stretched {
  position: absolute;
  width: 100%;
  height: 100%;  
}

#app {
  width: 100px;
  height:50px;
  background: lightblue;
  text-align: center;
  margin: 0 auto;
  position: relative;
}

<body>
    <div class="stretched visible" id="bg"></div>
    <div id="app">Hover me!</div>
</body>

请注意，不透明度为 0 的元素中的所有内容都会消失。这意味着，您的按钮和其他要保留在屏幕上的元素不应 children div.

Answer 3

我们不能只是淡化主体，或者实际上任何可以替代它的包装器 div，因为那样会淡化所有内容。我们也不能直接淡化背景图像，因为 CSS 没有这种能力。但是我们可以将两个背景图像放入 body 的前后两个伪元素中，然后可以将它们动画化以淡入淡出。该代码希望在鼠标悬停时淡入一个背景，并在鼠标移出时淡出。

使用了两张背景图片，一张是黑色。当另一个图像淡入时，此处的代码会淡出该图像，但如果需要，可以轻松将其删除。

将鼠标悬停在齿轮图像上可淡入第二张图像，鼠标移开齿轮可淡出。

<!DOCTYPE html>
<html>
<head>
<script>


    changeBgImage = () => {
        <!--document.body.style.backgroundImage = "url('../Images/Background/wraithback.jpg')";-->
        document.body.classList.toggle('showbefore');
        document.body.classList.toggle('showafter');
        console.log("working")




    }
    ogBgImage = () => {
        <!--document.body.style.backgroundImage = "url('christmas card 2020 front.jpg')";-->
        document.body.classList.toggle('showbefore');        
        document.body.classList.toggle('showafter');
        console.log("working")
    }


</script>

<style>
body {
    position: relative;
    height: 100vh; /* I added this just to cover the whole window you may not want it */
}



body:before, body:after {
    opacity: 0;
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-size:cover; /* I added this just to get the background over the whole window - you may or may not want it */
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    animation-duration: 2s; /* change to what you want it to be */
    animation-fill-mode: forwards;
}

body:before {
    background-image: linear-gradient(black, black); /*change this to url('your background image');*/
    animation-name: shown;
}

body:after {
    background-image: url('https://ahweb.org.uk/christmas card 2020 front.jpg');
    animation-name: unshown;
}

body.showbefore:before, body.showafter:after {
    animation-name: show;
}

body.showafter:before, body.showbefore:after {
    animation-name: unshow;
} 
  

@keyframes unshown {
  from {
      opacity: 0;
      }
  to {
      opacity: 0;
      }
  }

@keyframes shown {
  from {
      opacity: 1;
      }
  to {
      opacity: 1;
  }
}
@keyframes unshow {
  from {
      opacity: 1;
      }
  to {
      opacity: 0;
      }
  }

@keyframes show {
  from {
      opacity: 0;
      }
  to {
      opacity: 1;
  }
}

</style>
</head>
<body class="showbefore">
<div class="gwraith"><!--<a href="../Legends/wraith.html ">-->
                    <!--<img src="../Images/Legends_pics/wraithchibi.png" width="130vw" class="wraith"
                        onmouseover="changeBgImage();" onmouseout="ogBgImage();">-->
                        <img src="https://ahweb.org.uk/gear.jpg" width="130vw" class="wraith"
                        onmouseover="event.preventDefault();event.stopPropagation();changeBgImage();" onmouseout="event.preventDefault();event.stopPropagation();ogBgImage();">
                <!--</a>-->
</body>
</body>
</html>

在悬停时使用 javascript 或 css 使背景图像淡入淡出

Fading in a background image using javascript or css on hover

html

javascript

css

fade

web