疊加式接收div的CSS鏈接

Question

我有一個包含鏈接的<div>。

在這個<div>的右下角，我有一個覆蓋元素，它在盤旋時接管整個<div>。

此疊加元素還包含一個鏈接。

我的問題是重疊元素中的鏈接不可點擊。

問題是因爲我在類.overlay-content上使用了pointer-events: none;，但是如果我不使用它，兩個鏈接都會死機。

請參閱代碼在這裏：

.panel-default1 { 
 
    padding-top: 10px; 
 
    border-radius: 20px; 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.10); 
 
    height: 400px; 
 
    width: 400px; 
 
    overflow: hidden; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
.amg-corner-button_wrap { 
 
    display: block; 
 
    background-color: #e8c63d; 
 
    position: absolute; 
 
    transform: rotate(45deg); 
 
    right: -320px; 
 
    bottom: -320px; 
 
    width: 400px; 
 
    height: 400px; 
 
    -moz-transition: all 0.5s ease-out; 
 
    -o-transition: all 0.5s ease-out; 
 
    -webkit-transition: all 0.5s ease-out; 
 
    transition: all 0.5s ease-out; 
 
} 
 

 
.amg-corner-button_wrap:hover { 
 
    transform: rotate(45deg) scale(4); 
 
} 
 

 
.overlay-content { 
 
    pointer-events: none; 
 
    bottom: 0; 
 
    color: #333; 
 
    left: 0; 
 
    opacity: 0; 
 
    padding: 30px; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    padding: 8px; 
 
    right: 0; 
 
    top: 0; 
 
    -moz-transition: all 0.3s ease-out; 
 
    -o-transition: all 0.3s ease-out; 
 
    -webkit-transition: all 0.3s ease-out; 
 
    transition: all 0.3s ease-out; 
 
} 
 

 
.overlay-content h2 { 
 
    border-bottom: 1px solid #333; 
 
    padding: 0 0 12px; 
 
} 
 

 
.amg-corner-button_wrap:hover~.overlay-content { 
 
    opacity: 1; 
 
    -moz-transition: all 0.3s ease-out; 
 
    -o-transition: all 0.3s ease-out; 
 
    -webkit-transition: all 0.3s ease-out; 
 
    transition: all 0.3s ease-out; 
 
    -moz-transition-delay: 0.3s; 
 
    -o-transition-delay: 0.3s; 
 
    -webkit-transition-delay: 0.3s; 
 
    transition-delay: 0.3s; 
 
}

<div class="panel panel-default1"> 
 
    <div class="panel-body"> 
 
    <a href="#">Link</a> 
 
    <div class='amg-corner-button_wrap'></div> 
 

 
    <div class="overlay-content"> 
 
     <h2>Image Ink Logo</h2> 
 
     <a href="#">Link</a> 
 
    </div> 
 

 
    </div> 
 
    <!-- panel body --> 
 

 
</div> 
 
<!-- panel default -->

此外，here is fiddle。

有什麼辦法可以實現這個目標嗎？

Answer 1

不敢相信我真的找到了一個沒有任何缺點的純CSS解決方案。

.panel-default1 { 
 
    padding-top: 10px; 
 
    border-radius: 20px; 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.10); 
 
    height: 400px; 
 
    width: 400px; 
 
    overflow: hidden; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
.amg-corner-button_wrap { 
 
    display: block; 
 
    background-color: #e8c63d; 
 
    position: absolute; 
 
    transform: rotate(45deg); 
 
    right: -320px; 
 
    bottom: -320px; 
 
    width: 400px; 
 
    height: 400px; 
 
    -moz-transition: all 0.5s ease-out; 
 
    -o-transition: all 0.5s ease-out; 
 
    -webkit-transition: all 0.5s ease-out; 
 
    transition: all 0.5s ease-out; 
 
} 
 

 
.wrap:hover .amg-corner-button_wrap { 
 
    transform: rotate(45deg) scale(4); 
 
} 
 

 
.overlay-content { 
 
    pointer-events: none; 
 
    bottom: 0; 
 
    color: #333; 
 
    left: 0; 
 
    opacity: 0; 
 
    padding: 30px; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    padding: 8px; 
 
    right: 0; 
 
    top: 0; 
 
    -moz-transition: all 0.3s ease-out; 
 
    -o-transition: all 0.3s ease-out; 
 
    -webkit-transition: all 0.3s ease-out; 
 
    transition: all 0.3s ease-out; 
 
} 
 

 
.overlay-content h2 { 
 
    border-bottom: 1px solid #333; 
 
    padding: 0 0 12px; 
 
} 
 

 
.wrap:hover .amg-corner-button_wrap ~ .overlay-content { 
 
    pointer-events: auto; 
 
    opacity: 1; 
 
    -moz-transition: all 0.3s ease-out; 
 
    -o-transition: all 0.3s ease-out; 
 
    -webkit-transition: all 0.3s ease-out; 
 
    transition: all 0.3s ease-out; 
 
    -moz-transition-delay: 0.3s; 
 
    -o-transition-delay: 0.3s; 
 
    -webkit-transition-delay: 0.3s; 
 
    transition-delay: 0.3s; 
 
}

<div class="panel panel-default1"> 
 
    <div class="panel-body"> 
 
    <a href="#">Link</a> 
 
    <div class="wrap"> 
 
     <div class='amg-corner-button_wrap'></div> 
 
     <div class="overlay-content"> 
 
      <h2>Image Ink Logo</h2> 
 
      <a href="#">Link</a> 
 
     </div> 
 
    </div> 
 
    </div> <!-- panel body --> 
 
</div> <!-- panel default -->

JSFiddle

不是聽對角按鈕:hover事件，聽它的父元素。由於:hover將被分派，而不管元素的子元素的鼠標交互，所以一旦角落按鈕被徘徊，可以將pointer-events: auto設置爲包含鏈接的子元素（疊加內容）。現在，覆蓋內容是可以忍受的，因爲它是包裝div的孩子，它會導致:hover在整個包裝div中保持活躍。

Answer 2

我會推薦使用JS風格交換而不是CSS指針事件來解決這個問題。當鼠標移到底部角落時，需要觸發一次對CSS的更改，並且當您將鼠標移出容器時需要單獨的事件。我不相信CSS給你那種有條件的控制。

Answer 3

以下是使用動畫代替轉換的一半解決方案。這適用於您將鼠標懸停在amg-corner-button_wrap上時的情況，但當您將其移開時則不起作用。我對動畫有點新，所以希望這裏有人知道更多可能能夠在下半場幫助你。

如果您將鼠標懸停在amg-corner-button_wrap並將鼠標懸停在中間過渡位置上，這裏還有一個奇怪的視覺效果。原因是我爲疊加內容添加了背景顏色，所以當淡入淡出時，您將鼠標懸停在amg-corner-button_wrap上，在淡入淡出完成之前，輕掃開始反轉。

無論如何，希望這個50％的解決方案可以幫助你或其他人把它推到100％！有運行到一個會議，好運:-)

@keyframes example { 
 
    0% { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    } 
 
    1% { 
 
    visibility: visible; 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    } 
 
} 
 

 
.panel-default1 { 
 
    padding-top: 10px; 
 
    border-radius: 20px; 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.10); 
 
    height: 200px; 
 
    width: 200px; 
 
    overflow: hidden; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
.amg-corner-button_wrap { 
 
    display: block; 
 
    background-color: #e8c63d; 
 
    position: absolute; 
 
    transform: rotate(45deg); 
 
    right: -120px; 
 
    bottom: -120px; 
 
    width: 200px; 
 
    height: 200px; 
 
    -moz-transition: all 0.5s ease-out; 
 
    -o-transition: all 0.5s ease-out; 
 
    -webkit-transition: all 0.5s ease-out; 
 
    transition: all 0.5s ease-out; 
 
} 
 

 
.overlay-content { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    background-color: #e8c63d; 
 
    bottom: 0; 
 
    color: #333; 
 
    left: 0; 
 
    padding: 30px; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    padding: 8px; 
 
    right: 0; 
 
    top: 0; 
 
} 
 

 
.overlay-content h2 { 
 
    border-bottom: 1px solid #333; 
 
    padding: 0 0 12px; 
 
} 
 

 
.overlay-content~.amg-corner-button_wrap, 
 
.amg-corner-button_wrap:hover { 
 
    transform: rotate(45deg) scale(4); 
 
} 
 

 
.amg-corner-button_wrap:hover~.overlay-content, 
 
.overlay-content:hover { 
 
    animation-name: example; 
 
    animation-duration: 0.3s; 
 
    animation-timing-function: linear; 
 
    animation-delay: 0.3s; 
 
    animation-fill-mode: both; 
 
}

<div class="panel panel-default1"> 
 
    <div class="panel-body"> 
 
    <a href="#" onclick="alert('outer')">Link</a> 
 

 
    <div class='amg-corner-button_wrap'></div> 
 

 
    <div class="overlay-content"> 
 
     <h2>Image Ink Logo</h2> 
 
     <a href="#" onclick="alert('inner')">Link</a> 
 
    </div> 
 

 
    </div> 
 
    <!-- panel body --> 
 

 
</div> 
 
<!-- panel default -->

Answer 4

下面是一個CSS和HTML只改變一個工作小提琴：https://jsfiddle.net/y2auh7gn/4/。

它將鏈接從overlay-content中分離出來，並將其放置在應該與position: absolute對應的位置。我們需要將鏈接移出overlay-content，以便當我們將鼠標懸停在其上時，疊加層不會消失。

有一個副作用，其中的鏈接彈出與角落的一塊。