[英]Make my div clickable
我正在一個模塊框中工作,它將用戶重定向到外部網站。
我設法創建了布局並且內容正確顯示,但是當我添加了懸停效果時,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;}
謝謝!!
添加pointer-events:none;
到您的.module-pinterest:hover:after
css代碼之后,如下所示:
.module-pinterest:hover:after {
opacity: 1;
pointer-events:none;
}
如果將所有.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;
}
由於您將positioning
用於hover
的color
疊加,因此hover
錨點轉換為block
並添加position:relative
和z-index
值:
.module-body a {
position: relative;
z-index: 9;
display:block;
}
這是小提琴: https : //jsfiddle.net/kw5ybq9e/3/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.