讓我的div可點擊

Question

我正在將用戶重定向到外部網站的模塊框中工作。

我已經設法創建了佈局，內容顯示正常，但是當我添加懸停效果時，div不再可點擊，因此不會重定向到外部網站。

Here is my jsfiddle

這裏是我的代碼：

<div class="module-box"> 
<div class="module-dummy"></div> 
<div class="module-body module-pinterest"> 
    <a href="www.google.com"> 
     <div class="module-pinterest-title">Some text</div> 
     <div class="module-pinterest-description"> 
Some other text</div> 
    </a> 
</div> 

和我的CSS：

.module-box { 
display: inline-block; 
position: relative; 
width: 100%;} 

.module-dummy { 
margin-top: 100%;} 

.module-body { 
position: absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0;} 

.module-pinterest { 
background-color: #7C56BE;} 

.module-pinterest-title { 
padding: 25px 25px 0px 25px; 
color: #FFF;} 

.module-pinterest-description { 
padding: 25px 25px 0px 25px; 
font-size: 22px; 
line-height: 26px; 
font-weight: bold; 
color: #FFF;} 

.module-pinterest:after { 
content:'\A'; 
position:absolute; 
width:100%; height:100%; 
top:0; left:0; 
background:rgba(0,0,0,0.2); 
opacity:0; 
transition: all 0.5s; 
-webkit-transition: all 0.5s;} 

.module-pinterest:hover:after { 
opacity:1;} 

謝謝！

Answer 1

，如果你移動你的所有.module-pinterest樣式的錨，那麼它應該工作：

.module-pinterest a { 
    display:block; 
    width:100%; 
    height:100%; 
    background-color: #7C56BE; 
} 
.module-pinterest a:after { 
    content:'\A'; 
    position:absolute; 
    width:100%; height:100%; 
    top:0; left:0; 
    background:rgba(0,0,0,0.2); 
    opacity:0; 
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
} 
.module-pinterest a:hover:after { 
    opacity:1; 
} 

Updated fiddle

Answer 2

由於您使用positioning用於在hover的color覆蓋，你的錨轉換成block和添加position:relative和z-index值：

.module-body a { 
    position: relative; 
    z-index: 9; 
    display:block; 
} 

這裏是提琴： https://jsfiddle.net/kw5ybq9e/3/

Answer 3

添加pointer-events:none;您.module-pinterest:hover:after CSS代碼，就像這樣：

.module-pinterest:hover:after { 
    opacity: 1; 
    pointer-events:none; 
} 

Here is the JSFiddle demo