[英]a:hover not working because of z-index
I purchased a theme and am trying to modify it so some images on homepage appear black and white and when you hover they return their color. 我购买了一个主题,并试图对其进行修改,以使主页上的某些图像显示为黑白,并且当您将鼠标悬停时,它们会返回其颜色。 Hovering over the image has no effect due to the z-index afaik.
由于z-index afaik,将鼠标悬停在图像上没有效果。
.boxies {
filter: url(filters.svg#grayscale);
filter: gray;
-webkit-filter: grayscale(1);
}
.boxies:hover{
filter: none;
-webkit-filter: grayscale(0);
}
img{
display: block;
position: relative;
width: 100%;
z-index: 10;
}
.front_holder {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 24;
opacity: 1;
filter: alpha(opacity = 100);
overflow: hidden;
padding: 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translateZ(0px);
}
<img src="relaxation.jpg" alt="" class="boxies">
<div class="front_holder">
<a class="qbutton small" href="/manicure/" target="_self" style="background-color: transparent;height: 46px;line-height: 46px;">RELAXATION</a>
</div>
When I disable the z-index of "front_holder" in the Chrome inspector, the image hover works as it should. 当我在Chrome检查器中禁用“ front_holder”的z-index时,图像悬停将按预期工作。 You can see what is happening here: http://itlive.ca/deleteme/ (the 6 images on the homepage).
您可以在此处查看发生的情况: http : //itlive.ca/deleteme/ (主页上的6张图像)。
Any help would be greatly appreciated. 任何帮助将不胜感激。 Bob :)
鲍勃:)
that is just because your z-index of the front_holder element is bigger than the image,so your just need to change your hover event to the parent of your img and your front_holder 那只是因为front_holder元素的z-index大于图像,所以只需要将鼠标悬停事件更改为img的父对象和front_holder
.q_image_with_text_over:hover .boxies{
filter: none;
-webkit-filter: grayscale(0);
}
Try it. 试试吧。 Use another a tag to warp the img.
使用另一个标签扭曲img。
<a href="/manicure/"><img src="relaxation.jpg" alt="" class="boxies"></a>
Add css pointer-events: none
to front_holder
like it. 添加css
pointer-events: none
添加到front_holder
。
.front_holder {
pointer-events: none;
}
you could change like this: 您可以这样更改:
.q_image_with_text_over:hover img{
filter: none;
-webkit-filter: grayscale(0);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.