Question

我在Bootstrap中创建了个人资料图片结构。

我想问一下如何添加一个悬停效果，允许显示一个加号，例如= +，它向用户表明他们可以添加新图像或类似的东西。

感谢。

＆＃13;

@import url( 'https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' );

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
 <div class="form-group text-center" data-type="admins operators secretaries customers">
          <div class="profile-image-container">
             <div class="profile-header-img">
              <img class="img-circle" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" />
              <!-- badge -->
             <div data-content="">
              <span class="label label-primary rank-label" style="font-size: 13px;">
              <label id="total-points">0</label>Points  </span>
             </div>
            </div>

＆＃13;

Answer 1

编辑：向父div .profile-header-img提供了img width和height以设置:hover并防止闪烁：

＆＃13;

.profile-header-img {
  width: 120px;
  height: 120px;
  margin: 0 auto;
}
.glyphicon.glyphicon-plus-sign {
  display: none;
  color: white;
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 44px;
  transform: translate(-50%, 0);
  font-size: 32px;
}
.profile-header-img:hover .glyphicon.glyphicon-plus-sign {
  display: block;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="form-group text-center" data-type="admins operators secretaries customers">
  <div class="profile-image-container">
    <div class="profile-header-img">
      <img class="img-circle" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" />
      <span class="glyphicon glyphicon-plus-sign"></span>
      <!-- badge -->
      <div data-content="">
        <span class="label label-primary rank-label" style="font-size: 13px;">
          <label id="total-points">0</label>Points
        </span>
      </div>
    </div>
  </div>
</div>

＆＃13;

在bootstrap中添加悬停效果？

1 个答案: