javascript - Bootstrap - 图像到 gif 到模态

Question

我目前正在使用 bootstrap、html 和 css，但对这一切都是全新的，真的希望你能提供帮助。我试图在悬停时将图像更改为 gif，然后在单击时更改为模态。这将用于类似于 www.electricpulp.com/about/的团队页面。

这是我的代码:

HTML

<figure> 
    <div id="user-01" class="img-responsive figure-img img-fluid">
    </div>
    <figcaption class="figure-caption"> 
    <b>Norman Coleman</b><br>Data Analyst</figcaption> 
    </figure>

CSS

#user-01 {
  background: url("../images/team/user-01.jpg") no-repeat;
  background-repeat: no-repeat;
  background-size: 250px;
  height: 250px;
  background-position: center;
  }

#user-01:hover {
  background: url("../images/team/giphy-01.gif") no-repeat;
  background-repeat: no-repeat;
  background-size: 250px;
  height: 250px;
  background-position: center; }

大约 20 个团队成员需要这个。我知道必须有更短的方法来执行此操作(javascript 或 jquery)，但就我的生活而言，无法在网上找到任何按预期工作的东西。

提前致谢 克丽丝

Answer 1

欢迎来到 StackOverflow，

要获得更清晰、更简洁的 CSS 文件，您应该使用 CSS 的层叠功能。 为具有所有常见样式的用户元素使用一个类:

.user {
  background-repeat: no-repeat;
  background-size: 250px;
  height: 250px;
  background-position: center;
}

仅对背景图片使用 ID:

#user-01 {
  background: url("../images/team/user-01.jpg") no-repeat;
}

#user-01:hover {
  background: url("../images/team/giphy-01.gif") no-repeat;
}

要在 Bootstrap 中打开模式，请将此参数添加到具有用户类的 DIV 中:

<div id="user-01" class="img-responsive figure-img img-fluid user" data-toggle="modal" data-target="#myModal"></div>

并将此代码用于模态:

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

more info on modals