让我的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