Question

我购买了一个主题并尝试修改它，因此主页上的某些图像显示为黑白，当您悬停时它们会返回颜色。由于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>

当我禁用＆＃34; front_holder＆＃34;的z-index时在Chrome检查器中，图像悬停可以正常工作。你可以看到这里发生了什么：http://itlive.ca/deleteme/（主页上的6张图片）。

非常感谢任何帮助。鲍勃：）

Answer 1

这只是因为你的front_holder元素的z-index比图像大，所以你只需要将你的悬停事件更改为img和front_holder的父级

.q_image_with_text_over:hover .boxies{
  filter: none;
  -webkit-filter: grayscale(0);
}

Answer 2

试试吧。使用另一个标签来扭曲img。

<a href="/manicure/"><img src="relaxation.jpg" alt="" class="boxies"></a>

将css pointer-events: none添加到front_holder之类的。

.front_holder {
   pointer-events: none;
}

Answer 3

你可以这样改变：

.q_image_with_text_over:hover img{
   filter: none;
   -webkit-filter: grayscale(0);
}

a：因为z-index而悬停不起作用

3 个答案: