Question

悬停时有一个图像滤镜，顶部有一个绝对div，可以在悬停时取消底层图像的悬停效果。即使.absolute悬停

，我也需要保留图像过滤器

简化的html

<div class="parent">
   <div class="absoulte"><p>Hover bttn</p></div>
   <img src="blabla.jpg">
</div>

和css

.parent img:hover{
filter: brightness(0.5) saturate(0.4) hue-rotate(190deg);
}
.absoulte {
   width:100%; 
   position:absolute;
   text-align:center;
   opacity:0;
   z-index:9 
   bottom:100px;
}
.parent:hover .vieitembtn {opacity:1;}

Answer 1

我怀疑问题是语法错误。

您需要text-align的值（或完全删除它）并在所有属性上关闭分号。

修正了CSS：

.parent img:hover{
    filter: brightness(0.5) saturate(0.4) hue-rotate(190deg);
}
.absoulte {
   width:100%; 
   text-align:center;
   center;opacity:0;
   z-index:9;
   bottom:100px;
}
.parent:hover .vieitembtn {opacity:1;}

Answer 2

我认为你只需要添加-webkit-filter：而不仅仅是过滤器我为你做了一个jsfiddle，你真的不需要所有其他的东西虽然我不知道你想要做什么虽然... http://jsfiddle.net/322kxppm/

<div class="parent">
<p>Hover button</p>
<img src="http://www.clickerzoneuk.co.uk/cz/wp-content/uploads/2010/10/PuppySmall.jpg"/>

.parent{
text-align: center;
}

img:hover{
    -webkit-filter: brightness(.5) saturate(.4) hue-rotate(190deg);
}

绝对元素打破了悬浮效应

2 个答案: