首先,这是我的代码:http://codepen.io/anon/pen/BbklG。
应用我的悬停效果后,图片链接无法点击。
如何在保持悬停效果的同时使我的图像可以点击?谢谢!
<div class="view view-sixth">
<a href="http://www.stackoverflow.com"><img src="http://static.oprah.com/images/200212/omag/200212-omag-ripple-effect-600x411.jpg" border="0"></a>
<div class="mask">
<h2>Image Description</h2>
</div>
</div>
.view {
margin:0 auto;
width: 350px;
height: 230px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 350px;
height: 230px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
font-family: "Lato";
font-weight: 300;
text-transform: uppercase;
color: #fff;
vertical-align: middle;
text-align: center;
position: relative;
font-size: 30px;
}
.view-sixth img {
-webkit-transition: all 0.4s ease-in-out 0.5s;
-moz-transition: all 0.4s ease-in-out 0.5s;
-o-transition: all 0.4s ease-in-out 0.5s;
-ms-transition: all 0.4s ease-in-out 0.5s;
transition: all 0.4s ease-in-out 0.5s;
}
.view-sixth .mask {
pointer-events:none;
background-color: rgba(230,203,226,0.7);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease-in 0.1s;
-moz-transition: all 0.3s ease-in 0.1s;
-o-transition: all 0.3s ease-in 0.1s;
-ms-transition: all 0.3s ease-in 0.1s;
transition: all 0.3s ease-in 0.1s;
}
.view-sixth h2 {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
background: transparent;
margin: 20px 40px 0px 40px;
-webkit-transform: scale(2.5);
-moz-transform: scale(2.5);
-o-transform: scale(2.5);
-ms-transform: scale(2.5);
transform: scale(2.5);
-webkit-transition: all 0.3s ease-in-out 0.1s;
-moz-transition: all 0.3s ease-in-out 0.1s;
-o-transition: all 0.3s ease-in-out 0.1s;
-ms-transition: all 0.3s ease-in-out 0.1s;
transition: all 0.3s ease-in-out 0.1s;
}
.view-sixth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
.view-sixth:hover h2 {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
答案 0 :(得分:1)
将您的元素包裹在a
中,或者只需将此行添加到CSS中:
.view-sixth .mask {
pointer-events:none;
答案 1 :(得分:0)
图像无法点击的原因是因为您的“蒙版”div正在覆盖它。您正在使用绝对定位将块级元素放在另一个块元素的顶部。
我建议将mask div包装在anchor标签内,图片看看它是如何工作的。
答案 2 :(得分:-1)
<div class="view view-sixth">
<a href="http://www.stackoverflow.com"><img src="http://static.oprah.com/images/200212/omag/200212-omag-ripple-effect-600x411.jpg" border="0">
<div class="mask">
<h2>Image Description</h2>
</div></a>
</div>
你错过了一个结束div,你关闭一个标签是在错误的地方使用上面的代码。