Question

希望我能够在这里提供足够的代码，但我希望能够为我正在构建的Bootstrap图像库提供一些帮助。目前，我有各种各样的图像出现在一个投资组合中，并在翻转时，＆＃34;覆盖＆＃34;出现，以及用户可以单击以打开灯箱的图标;

<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发布的示例代码后，我们确定此问题的解决方案只是从您的图标移动锚标记以包含触发叠加层的div。

所以，让你的锚标签如此：

// 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>

我已将下面的原始建议留给了历史背景。

/ ========以下不推荐的答案。 ====== /

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

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

<强>重复的：

<a href="images/work-1.jpg" class="image-link lightbox"></a>

则...

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

已移至仅限图片



则...

<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类添加到图标的类中：



希望有所帮助。

引导覆盖可点击链接

1 个答案: