html - Bootstrap Overlay 可点击链接

Question

希望我能够在这里提供足够的代码，但我希望对我正在构建的 Bootstrap 图片库有所帮助。目前，我的作品集中有各种图像，鼠标悬停时会出现一个“叠加层”，以及一个用户可以单击以打开灯箱的图标；

<div class="container-fluid full-width">
  <div class="row row-no-gutter">
    <div class="col-md-push-0 col-md-12 col-sm-12 col-sm-push-0 content">
      <div class="isotope_items">
        <div class="single_item link web-design col-md-3 col-sm-6 col-xs-12">
          <div class="work-inner">
            <div class="work-overlay">  
              <div class="overlay-in">
                <div class="work-info">   
                  <div class="work-links">                                             
                    <a href="images/work-1.jpg" class="image-link lightbox"><i data-icon="W" class="icon" style="color:white"></i></a>
                  </div>
                </div>
              </div>
            </div>
              <a href="images/work-1.jpg" class="image-link lightbox"><img src="images/work-1.jpg" class="img-full-width" alt="" ></a>
          </div>
        </div>
      </div>

相关CSS；

.work-inner {
  position: relative;
}

.work-overlay {
  position: absolute;
  color: #fff;
  width: 100%;
  height: 100%;
  text-align: center;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.overlay-in {
  display: table;
  height: 100%;
  width: 100%;
}

.work-info {
  display: table-cell;
  vertical-align: middle;
}

.overlay-in p {
  font-size: 18px;
  line-height: 20px;
  font-style: normal;
  font-weight: 500;
  color: #fff;
  opacity: 0;
  -webkit-transform: translate3d(0, 80px, 0);
  -moz-transform: translate3d(0, 80px, 0);
  -ms-transform: translate3d(0, 80px, 0);
  -o-transform: translate3d(0, 80px, 0);
  transform: translate3d(0, 80px, 0);
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  -ms-transition: all 400ms ease;
  -o-transition: all 400ms ease;
  transition: all 400ms ease;
}

.overlay-in .work-links {
    margin-top: 20px;
    opacity: 0;
    display: block;
    -webkit-transform: translate3d(0, 80px, 0);
    -moz-transform: translate3d(0, 80px, 0);
    -ms-transform: translate3d(0, 80px, 0);
    -o-transform: translate3d(0, 80px, 0);
    transform: translate3d(0, 80px, 0);
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}


.overlay-in .work-links a {
  font-size: 20px;
  color: #000;
  margin-right: 10px;
  text-decoration: none;
  opacity: 1;
}

.overlay-in .work-links a:hover{ 
  opacity:0.5;
}

.work-inner:hover > .work-overlay{ 
  background: rgba(0, 0, 0, 0.80);
  opacity:1;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.work-inner:hover .overlay-in p{
  opacity:1;
  color: #000;
  line-height: 24px;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -webkit-transition-delay: 0.3s; 
  transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -ms-transition-delay: 0.3s;
}

.work-inner:hover .overlay-in .work-links{
  opacity:1;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  -ms-transition-delay: 0.4s;
}

不过，我要做的是让整个图像都可以被点击，而不仅仅是 数据图标。可以想象，仅让图标可点击会给无法准确点击图标的移动设备带来问题。

已更新代码 - 抱歉太长了!

Answer 1

用解决方案编辑:

经过我们的讨论并查看您在 35.153.183.88/portfolio 上发布的示例代码，我们确定解决此问题的方法是简单地将 anchor 标记从您的图标移动到包含触发叠加层的 div。

所以，让你的 anchor 标签像这样:

// Other Divs
<div class="work-inner">
    <a href="images/work-1.jpg" class="image-link lightbox">
        <div class="work-overlay"> 
             // Other divs/image/icon.
        </div>
    </a>
</div>

出于历史背景，我在下面留下了我最初的建议。

/======== 下面已弃用的答案。 ========/

anchor 标签内的任何内容都将成为链接。如果模板的结构不允许您在 anchor 标记内移动图像，那么您可以尝试在图像周围复制 anchor 标记，或者只是移动到图像并将其从图标中删除.

我没有在下面包含你所有的 div，因为在这里格式化是一场噩梦。

重复:

<a href="images/work-1.jpg" class="image-link lightbox"><i data-icon="W" class="icon" style="color:white"></i></a>

然后...

<a href="images/work-1.jpg" class="image-link lightbox"><img src="images/work-1.jpg" class="img-full-width" alt="" ></a>

移至仅图像

<i data-icon="W" class="icon" style="color:white"></i>

然后...

<a href="images/work-1.jpg" class="image-link lightbox"><img src="images/work-1.jpg" class="img-full-width" alt="" ></a>

第二个，如果您需要保留图标的链接样式，您可以将“image-link lightbox”css 类添加到图标的类中:

<i data-icon="W" class="icon image-link lightbox" style="color:white"></i>

希望对您有所帮助。