如何在鼠标悬停时淡入巨型屏幕的背景图像，并在鼠标退出时将其恢复为以前的背景图像

Question

我正在使用引导程序设计一个网站，我的页面上有一个巨型机器人。

巨型机器人有一个背景图像。悬停时如何在巨型机器人的当前背景图像中淡入淡出？

这意味着如果我将光标放在巨型屏幕上，另一个背景图像会淡入，当我将光标从巨型屏幕上移出时，上一张图片会返回。

这是我的Jumbotron html：

<div class="jumbotron">
  <div class="container">
    <h1>Life is an Art.</h1>
    <p style="font-size: 150%"><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar nunc urna, non cursus enim ultricies in.</small></p>
    <button type="button" class="btn btn-primary btn-lg"><a href="#">Learn More »</a></button>
  </div>
</div>

.CSS：

.jumbotron { background-image: url("02.jpg"); }
.jumbotron:hover { background-image: url("01.jpg"); }

Answer 1

使用纯 CSS，您可以使用 transition 属性对其进行动画处理，如下所示。不过，这可能在较旧的浏览器中不可用。

.jumbotron {
  background-image: url("http://www.placecage.com/200/300");
  transition: 1000ms;
}
.jumbotron:hover {
  background-image: url("http://www.placecage.com/300/200");  
  transition: 1000ms;
}

<div class="jumbotron">
  <div class="container">
    <h1>Life is an Art.</h1>
    <p style="font-size: 150%"><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar nunc urna, non cursus enim ultricies in.</small></p>
    <button type="button" class="btn btn-primary btn-lg"><a href="#">Learn More »</a></button>
  </div>
</div>