Question

我是新手，在滚动时我遇到了与导航栏重叠的图像问题。只有当我在悬停时应用-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

感谢!!!

Answer 1

如果您向z-index: 9999;添加#fixedbar，一切都会正常运行。

Answer 2

当呈现新元素时，呈现重叠的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或最好是更大的数字。

Answer 3

如果没有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！

滚动时带灰度滤镜的图像与导航栏重叠

3 个答案: