渐变叠加位于按钮前面 - 不可单击

Question

我在网格元素上做了一个渐变叠加。

一切都像它应该的那样实际工作，但有一个大问题。在我的CMS系统的后端，覆盖层位于一个非常中心的按钮前面。这是我必须更改网站上的代码时单击的按钮。

我没有访问权限，也不允许覆盖现有功能等。整个问题是以下类：

.overlay {
    position:absolute;
    transition:all .3s ease;
    /* opacity:0; */
    transition:1.9s;
    background: #00b1bab8;
  }

如果我opacity:0;评论，我可以点击按钮。当不透明度处于活动状态时，我无法单击按钮。也无法设置 z 索引，因为这不起作用。大多数情况下，如果我开始覆盖类等，我害怕影响所有其他页面。

有没有人对我如何获得梯度效果但仍然使用 CMS 系统的后端有替代想法或解决方案。是需要一些javascript，还是我正在监督的一个简单的解决方案？

我在那里发布了一些代码，其中大部分是相关的 - 在这里我正在考虑覆盖类。

.image-overlay {
    position:relative;
  }
  .overlay {
    position:absolute;
    transition:all .3s ease;
    opacity:0;
    transition:1.9s;
    background: #00b1bab8;
  }
  .image-overlay:hover .overlay {
    opacity:1;
  }
  .overlayFade {
    background: rgba(27, 27, 27, 0.5);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 15px;
    padding-left: 35px;
    padding-right: 35px;
  }

 <div class="mk row">
          <div class="col-sm-12">
              <div class="mk row">
                  <div class="col-sm-6 margin_bottom">
                      <a href="#">
                          <div class="image-overlay">
                              <div class="overlay overlayFade"></div>
                              <img src="https://vouzalis.dk/test.jpg" alt="John Doe" class="img-responsive"></img>
                              <div class="inner-wrapper bottom-left">
                                  <h2 class="light-font">Company gear</h2>
                                  <p class="light-font">Se vores udvalg af klasse Company merchandise</p>
                              </div>
                          </div>
                      </a>
                  </div>
                  <div class="col-sm-6">
                      <div class="mk row">
                          <div class="col-sm-12 margin_bottom">
                              <a href="#">
                                  <div class="image-overlay">
                                      <div class="overlay overlayFade"></div>
                                      <img src="https://company.dk/Static/Cms/c3a9d70d-8a4c-4121-bb01-4144125708ab.jpg" alt="John Doe" class="img-responsive"></img>
                                      <div class="inner-wrapper bottom-right">
                                          <h3 class="light-font">5 par solbriller</h3>
                                          <p class="light-font">5 brændvarme tilbud</p>
                                      </div>
                                  </div>
                              </a>  
                          </div>
                      </div>
                      <div class="mk row">
                          <div class="col-xs-6 col-sm-6 margin_bottom">
                              <a href="#">
                                  <div class="image-overlay">
                                      <div class="overlay overlayFade"></div>
                                      <img src="https://company.dk/Static/Cms/ec68cc2e-f3f1-485f-bbb5-f3b22a052a80.jpg" alt="Følg Company på Snapchat" class="img-responsive"></img>
                                      <div class="inner-wrapper bottom-left">
                                          <h5 class="light-font">Motorsport kasket</h5>
                                          <p class="light-font">Stilet kasket til når solen er skarp</p>
                                      </div>
                                  </div>
                              </a>
                          </div>
                          <div class="col-xs-6 col-sm-6 margin_bottom">
                              <a href="#">
                                  <div class="image-overlay">
                                      <div class="overlay overlayFade"></div>
                                      <img src="https://company.dk/Static/Cms/74ce064e-942d-4d60-8f2a-5238e40f9a22.jpg" alt="John Doe" class="img-responsive"></img>
                                      <div class="inner-wrapper centered">
                                          <!--<button class="btn btn-success" style="background-color: transparent;">Læs mere</button>-->
                                      </div>
                                  </div>
                              </a>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>

Answer 1

您可以使用叠加层上的pointer-events: none;来禁用任何指针事件并有效地"单击"它。请注意，这不适用于 IE10 或更低版本。