html - 需要按钮在手机上可见

Question

我有一个非常好的悬停效果，用于我的“关于”页面上的图像。当光标悬停在图像上时，它会提供一个很好的不透明度并在图像中间显示“查看更多”按钮，用户可以单击该按钮并将他们带到实际的个人资料页面。

虽然在移动设备上，用户不能点击但应该能够按下按钮转到个人简介页面，问题是当我在移动设备上测试它时我根本无法显示按钮，如果我按下图像，我将无法显示更多 View 按钮。

图像本身不是个人简介页面的链接，只有按钮会将用户带到个人简介页面。我应该只将图像链接到生物吗？还是有另一种方法可以在移动设备上显示按钮？谢谢。

HTML

<div id="about">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="imgAbout">
          <img src="img/team/830x593.jpg" class="img-responsive" alt="Bio">

        <div class="center-container">
          <a class="btn btn-sm btn-custom" href="bios/teamBio.html">View More</a>
        </div>
      </div>
      <h2>Name</h2>
      <h3>Chairman &amp; CEO<br> 
      Senior Wealth Advisor</h3>
    </div> <!-- end col-md-4 -->

    <div class="col-md-4">
      <div class="imgAbout">
        <img src="img/team/830x593.jpg" class="img-responsive" alt="Bio">

        <div class="center-container">
          <a class="btn btn-sm btn-custom" href="bios/teamBio.html">View More</a>
        </div>
      </div>
      <h2>Name</h2>
      <h3>President<br>
      Senior Wealth Advisor</h3>
    </div>

    <div class="col-md-4">
      <div class="imgAbout">
        <img src="img/team/830x593.jpg" class="img-responsive" alt="Bio">

        <div class="center-container">
          <a class="btn btn-sm btn-custom" href="bios/teamBio.html">View More</a>
        </div>
      </div>
      <h2>Name</h2>
      <h3>Chief Operating Officer</h3>
    </div>
  </div> <!-- end row -->
</div> <!-- end Container -->
</div> <!-- end About -->

CSS

/*======= about ========*/
#about p {
  text-align: center;
  padding-bottom: 15px;
}

#about h3 {
  margin-top: -5px;
  padding-bottom: 15px;
}

#about .team h2 {
  font-weight: 700;
  font-variant: small-caps;
}

#about h2 {
  text-align: center;
}

#about h3 {
  text-align: center;
  color: #5C615F;
}

#about img {
  margin: 0 auto;
}

.imgAbout {
  position: relative;
  background: #1C1C1C;

  border-radius: 10px;
}

.imgAbout img {
  display: block;
  height: auto;
  transition: opacity .2s ease-in-out;
  -moz-transition: opacity .2s ease-in-out;
  -webkit-transition: opacity .2s ease-in-out;
  -webkit-transform: translateZ(0);

  border-radius: 10px;
}

.imgAbout:hover img {
  opacity: 0.6;
  transition: opacity .2s ease-in-out;
  -moz-transition: opacity .2s ease-in-out;
  -webkit-transition: opacity .2s ease-in-out;
}

.center-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}

.imgAbout .center-container .btn {
  visibility: hidden;
  opacity: 0;

  -webkit-transition: color .2s ease-in, background .2s ease-in, visibility   .2s ease-in-out, opacity .2s ease-in-out;
  -moz-transition: color .2s ease-in, background .2s ease-in, visibility .2s ease-in-out, opacity .2s ease-in-out;
  -ms-transition: color .2s ease-in, background .2s ease-in, visibility .2s ease-in-out, opacity .2s ease-in-out;
  -o-transition: color .2s ease-in, background .2s ease-in, visibility .2s ease-in-out, opacity .2s ease-in-out;
  transition: color .2s ease-in, background .2s ease-in, visibility .2s ease-in-out, opacity .2s ease-in-out;
}

.imgAbout:hover .center-container .btn {
  visibility: visible;
  opacity: 1;
}

/*======= jumbotronAbout ========*/
.jumbotronAbout {
  height: 325px;
  margin-top: -20px;
  margin-bottom: 0;
  background-image: url('../img/pier.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 25%;

  margin-bottom: 30px;

  -webkit-box-shadow: 0 3px 4px 0 rgba(50, 50, 50, 0.75);
  -moz-box-shadow:    0 3px 4px 0 rgba(50, 50, 50, 0.75);
  box-shadow:         0 3px 4px 0 rgba(50, 50, 50, 0.75);

  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
}

#about h1 {
  /*color: #FAFAFA;*/
  text-align: center;
  font-size: 2.571rem; /*36px*/
  font-variant: small-caps;
}


/*==================================================
=             Media Queries                        =
==================================================*/

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
  #about p {
    text-align: left;
  }
}

/* Medium devices (medium devices, 992px and up) */
@media (min-width: 992px) {
  #about h2 {
    font-size: 1.714rem; /*24px*/
    text-align: left;
  }

  #about h3 {
    font-size: 1.286rem; /*18px*/
    text-align: left;
  }

   #about h1 {
    font-size: 3.286rem; /*46px*/
  }
}

Answer 1

尝试类似的东西:

$('.imgAbout').click(function(){
    $(this).find('.center-container .btn').css('visibility', 'visible');
  $(this).find('.center-container .btn').css('opacity', '1');

});