Question

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

一切正常运行，但是有一个大问题。在我的CMS系统的后端，叠加层位于一个非常中心的按钮前面。这是我必须在网站上更改代码时单击的按钮。

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

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

如果我反对opacity:0;，则可以单击该按钮。当不透明处于活动状态时，我无法单击该按钮。也无法设置z-index，因为它不起作用。通常，如果我开始覆盖类等，我担心会影响所有其他页面。

是否有人对我如何获得渐变效果有其他想法或解决方案，但仍使用CMS系统的后端。是需要一些Java脚本还是只是我要监督的简单解决方案？

我发布了一些最相关的代码-在这里，我正在考虑覆盖类。

.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或更低版本。

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

1 个答案: