让我的 div 可点击答案

【问题标题】：Make my div clickable让我的 div 可点击
【发布时间】：2016-04-28 22:11:20
【问题描述】：

我正在将用户重定向到外部网站的模块框中工作。

我已经成功地创建了布局并且内容显示正确，但是当我添加悬停效果时，div 不再可点击，因此不会重定向到外部网站。

这是我的代码：

<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;}

谢谢！！

【问题讨论】：

标签： html css href

【解决方案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

【讨论】：

【解决方案2】：

由于您使用positioning 将color 覆盖在hover 上，请将您的锚点转换为block 并添加position:relative 和z-index 值：

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

这里是小提琴： https://jsfiddle.net/kw5ybq9e/3/

【讨论】：

【解决方案3】：

将pointer-events:none; 添加到您的.module-pinterest:hover:after CSS 代码中，如下所示：

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

Here is the JSFiddle demo

【讨论】：