滚动时灰度过滤器重叠导航栏的图像

我对此很陌生，并且在滚动时与导航栏重叠的图像存在问题。它只发生在悬停时应用-webkitfilter灰度。如果我从样式表中删除它，一切都会恢复正常。滚动时灰度过滤器重叠导航栏的图像

这就是：

.images { 
color: darkgray; 
font-size: 0.9rem; 
filter: gray; 
-webkit-filter: grayscale(100%);

}

.images:hover { 
filter: none; 
-webkit-filter: grayscale(0%);

}

的网址是：http://josefinaechenique.esy.es/musica.html

overlapping image

谢谢！

来源

2017-06-14 Margaret

如果您将z-index: 9999;添加到您的#fixedbar一切都会正常工作。

来源

2017-06-14 18:23:54 maxshuty

Html当渲染重叠时发现新元素。

div { 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
#a { 
 
    background: red; 
 
    left: 10px; 
 
    top: 10px; 
 
} 
 
#b { 
 
    background: blue; 
 
    left: 60px; 
 
    top: 60px; 
 
}

<div id="a"></div> 
 
<div id="b"></div>

您可以通过使用z-index属性覆盖此行为。

div { 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
#a { 
 
    background: red; 
 
    left: 10px; 
 
    top: 10px; 
 
    z-index: 100; 
 
} 
 
#b { 
 
    background: blue; 
 
    left: 60px; 
 
    top: 60px; 
 
}

<div id="a"></div> 
 
<div id="b"></div>

您需要添加z-index: 999或最好较大数量的#fixedbar造型里面。

来源

2017-06-14 18:26:40

如果没有HTML代码，很难知道发生了什么，可能会发生的工作是在应用过滤器后添加z-index，这将有助于解决问题。

.images { 
color: darkgray; 
font-size: 0.9rem; 
filter: gray; 
-webkit-filter: grayscale(100%); 
z-index: -1; 
}

将其添加到悬停后的过滤器上，以及如果它导致问题。

.images:hover { 
filter: none; 
-webkit-filter: grayscale(0%); 
z-index: -1; 
}

这应该是你的问题。拥有Web-Dev！

来源

2017-06-14 18:27:07

滚动时灰度过滤器重叠导航栏的图像

回答

相关问题