[英]Make my div clickable
I'm working in a module box which redirects the user to an external website. 我正在一个模块框中工作,它将用户重定向到外部网站。
I've managed to create the layout and the content is displayed properly, however when I added the hover effect, the div is no longer clickable and so does not redirect to the external website. 我设法创建了布局并且内容正确显示,但是当我添加了悬停效果时,div不再可单击,因此不会重定向到外部网站。
Here is my jsfiddle 这是我的jsfiddle
And here is my code: 这是我的代码:
<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>
and my CSS: 和我的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;}
Thanks!! 谢谢!!
Add pointer-events:none;
添加pointer-events:none;
to your .module-pinterest:hover:after
css code, like so: 到您的.module-pinterest:hover:after
css代码之后,如下所示:
.module-pinterest:hover:after {
opacity: 1;
pointer-events:none;
}
if you move all your .module-pinterest
styles to the anchor, then it should work: 如果将所有.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;
}
Since you are using positioning
for overlaying of color
upon hover
, convert your anchor to block
and add position:relative
and a z-index
value: 由于您将positioning
用于hover
的color
叠加,因此hover
锚点转换为block
并添加position:relative
和z-index
值:
.module-body a {
position: relative;
z-index: 9;
display:block;
}
Here is fiddle: https://jsfiddle.net/kw5ybq9e/3/ 这是小提琴: https : //jsfiddle.net/kw5ybq9e/3/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.