鏈接不覆蓋

Question

工作，我有一對夫婦的瓷磚與變暗疊加，當鼠標懸停出現一個標題：

.photo { 
 
    position: relative; 
 
    margin: 10px 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
} 
 
.photo img { 
 
    width: 100%; 
 
    vertical-align: top; 
 
} 
 
.photo:after, 
 
.photo:before { 
 
    position: absolute; 
 
    opacity: 0; 
 
    transition: all 1s; 
 
    -webkit-transition: all 1s; 
 
} 
 
.photo:after { 
 
    content: '\A'; 
 
width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background: rgba(0, 0, 0, 0.4); 
 
} 
 
.photo:before { 
 
    width: 100%; 
 
    content: attr(data-content); 
 
    color: $white; 
 
    text-align: center; 
 
    font-size: 200%; 
 
    z-index: 1; 
 
    padding: 4px 10px; 
 
} 
 
.photo:hover:after, 
 
.photo:hover:before { 
 
    opacity: 1; 
 
}

<div class="wrap-photo"> 
 
    <div class="photo" data-content="Benefits"> 
 
    <a href="kb_view.do?sysparm_article=KB0010030"> 
 
     <img src="Wellness.jpg" alt="" width="100%" height="100%" /> 
 
    </a> 
 
    </div> 
 

 
    <div class="photo" data-content="Payroll"> 
 
    <a href="kb_view.do?sysparm_article=KB0010031"> 
 
     <img src="award.jpg" alt="" width="100%" height="100%" /> 
 
    </a> 
 
    </div> 
 

 
    <div class="photo" data-content="Training"> 
 
    <a href="#" target="_blank"> 
 
     <img src="Personnel.jpg" alt="" width="100%" height="100%" /> 
 
    </a> 
 
    </div> 
 
</div>

的問題是與地方的覆蓋效果，阻止鏈接並使其不可點擊。我試圖搞亂z-索引，但是當一件事情有效時，另一件事就會被阻止。我希望疊加和文本在盤旋時工作，但也可以點擊，這是可能的嗎？

Answer 1

您可以在：選擇器之前和之後選擇a標記，然後修改.photo a:before以垂直居中文本。

.photo a:before { 
    [...] 
    -ms-transform: translate(0, -50%); 
    -webkit-transform: translate(0, -50%); 
    transform: translate(0, -50%); 
    top: 50%; 
} 

.photo { 
 
    position: relative; 
 
    margin: 10px 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
} 
 

 
.photo img { 
 
    width: 100%; 
 
    vertical-align: top; 
 
} 
 

 
.photo a:after, 
 
.photo a:before { 
 
    position: absolute; 
 
    opacity: 0; 
 
    transition: all 1s; 
 
    -webkit-transition: all 1s; 
 
} 
 

 
.photo a:after { 
 
    content: '\A'; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background: rgba(0, 0, 0, 0.4); 
 
} 
 

 
.photo a:before { 
 
    width: 100%; 
 
    content: attr(data-content); 
 
    color: $white; 
 
    text-align: center; 
 
    font-size: 200%; 
 
    z-index: 1; 
 
    -ms-transform: translate(0, -50%); 
 
    -webkit-transform: translate(0, -50%); 
 
    transform: translate(0, -50%); 
 
    top: 50%; 
 
} 
 

 
.photo a:hover:after, 
 
.photo a:hover:before { 
 
    opacity: 1; 
 
}

<div class="wrap-photo"> 
 
    <div class="photo"> 
 
    <a href="kb_view.do?sysparm_article=KB0010030" data-content="Benefits"> 
 
     <img src="http://placehold.it/200x100" alt="" width="100%" height="100%" /> 
 
    </a> 
 
    </div> 
 

 
    <div class="photo"> 
 
    <a href="kb_view.do?sysparm_article=KB0010031" data-content="Payroll"> 
 
     <img src="http://placehold.it/200x100" alt="" width="100%" height="100%" /> 
 
    </a> 
 
    </div> 
 

 
    <div class="photo"> 
 
    <a href="#" target="_blank" data-content="Training"> 
 
     <img src="http://placehold.it/200x100" alt="" width="100%" height="100%" /> 
 
    </a> 
 
    </div> 
 
</div>