Question

我有一个缩略图图像，上面有一个叠加元素（向上滑动）。当您单击背景图像时，它应该打开一个灯箱（确实如此）。单击叠加层div时，它将打开一个单独的模态。 问题是：当我点击覆盖div时，灯箱和模式框都打开了。我认为这很难解释，但是我想知道如何禁用通过橙色div框的点击

在此实例中无法使用空白的href。当我这样做时，灯箱会复制图像。

        .overlay {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          background: rgba(47, 74, 102, .6);
          overflow: hidden;
          width: 100%;
          height: 0;
          transition: .5s ease;
          cursor: pointer;
          display: block;
        }

        .overlay {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          overflow: hidden;
          width: 100%;
          height: 0;
          transition: .5s ease;
          cursor: pointer;
          display: block;
        }

        .imagetext:hover .overlay {
          height: 100%;
        }

        .mySlides {display:none;}

        .overlaytitle {
          margin-top: 1rem;
            color: white;
          opacity: 1.0;
            font-size: 1rem;
            position: absolute;
          font-family: oswald;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            text-align: center;
            width: 100%;
            padding-top: 1rem;
        }


        .overlaysubtitle {
            color: white;
          font-family: lato;
          font-size: 12px;
          font-style: italic;
        }

        .fullproj{
          background-color: #f17e5a;
            bottom: 0;
          align-content: center;
            height: 30%;
            line-height: 30%;
          padding-top: 7%;
          width: 100%;
          text-align: center;
          font-family: oswald;
          color: white;
          text-decoration: none;
          font-size: 14px;
            position: absolute;
            z-index: 1;
        }


        .modalbutton{
            width: 100%;
            height: 30%;
            background-color: #f17e5a;
            text-decoration: none;
            color: white;
            font-size: 1rem;
            bottom: 0;
            position: absolute;
            border:none;
            font-family: oswald;
            font-weight: thin;
            cursor: pointer;

        }


        .modalbutton:hover{
            background-color:#bb5c5a;
        }

        <div class="responsive brands">
          <div class="gallery">
             <div class="imagetext"> 
              <a href="mpimg/viva/box.png" alt="Viva Lifestyle Box and Bar" rel="lightbox1" data-lightbox="example-set"  title="Viva Lifestyle Box and Bar">
                <div class="overlay">
                  <div class="overlaytitle">Viva Lifestyle<br>
                    <div class="overlaysubtitle">Branding</div><br>
                  </div> 
                            <button class="modalbutton"><a href="#">VIEW FULL PROJECT</a></button>
                        </div>   
                <img src="Img/portfolio/Branding/viva.png" alt="EXAMPLE IMG" width="600" height="400" class="image">	
              </a>
                </div>
            </div>
          </div>

Answer 1

您可以通过CSS完成此操作

.modalbutton {
  pointer-events: none;
}

仅在div区域内禁用可点击元素

1 个答案: