文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在mouseover上淡入jumbotron的背景图像，并将其恢复为mouseout上的前一个背景图像？

问如何在mouseover上淡入jumbotron的背景图像，并将其恢复为mouseout上的前一个背景图像？
EN

Stack Overflow用户

提问于 2015-04-16 23:06:41

回答 1查看 2.1K关注 0票数 2

我正在使用bootstrap设计一个网站，我的页面上有一个巨型加速器。

巨型加速器有一个背景图像。如何在悬停状态下淡入巨型加速器的当前背景图像？

意思是，如果我把光标放在巨型加速器上，另一个背景图像就会淡入，当我把光标移出巨型加速器时，上一张图片又回来了。

这是我的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"); }

css

twitter-bootstrap

javascript

jquery

html

回答 1

Stack Overflow用户

发布于 2015-04-16 23:30:27

使用纯CSS，您可以使用transition属性为其设置动画，如下所示。不过，这在older browsers中可能不可用。

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29678828

复制

相似问题

问如何在mouseover上淡入jumbotron的背景图像，并将其恢复为mouseout上的前一个背景图像？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在mouseover上淡入jumbotron的背景图像，并将其恢复为mouseout上的前一个背景图像？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在mouseover上淡入jumbotron的背景图像，并将其恢复为mouseout上的前一个背景图像？
EN