Question

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

虽然在移动设备上，用户无法点击，但应该可以按下按钮转到生物页面，问题是当我在手机上测试时我无法获得按钮要显示，如果我按下图像，我就无法显示更多按钮。

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

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');

});

Answer 2

这可能是因为您的.center-container选择器绝对定位。您可能需要使用z-index。

尝试：

.imgAbout img {
    border-radius: 10px;
    display: block;
    height: 20px; //<-- need to specify a height when absolutely positioned
    position: absolute; //<--added this
    transition: opacity 0.2s ease-in-out 0s;
    width: 100%; 
    z-index: 50; //<--added this
}

并且

.center-container {
    align-items: center;
    bottom: 0;
    display: flex;
    height: 20px; //<--added this
    justify-content: center;
    left: 0;
    position: absolute; 
    right: 0;
    top: 0;
    z-index: 100; //<--added this
}

需要按钮才能在手机上看到

2 个答案: