有人可以告诉我为什么 a：hover 不起作用吗？

Question

:hover不起作用，我不知道为什么。

您应该知道我将原始代码减少到了这几行。但是每个人都像" content"div。

一样有用

如果我删除width:100%;或position:fixed;它有效，但我不知道为什么(我无法删除这些行，因为我在原始网站中使用它们(

#content {
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
}
a {
  width: 100%;
}
a:hover {
  font-size: 23pt;
}

<a>HOME</a>
<div id="content">
</div>

Answer 1

#contentdiv由于position:fixed引起的正常DOM绘画流，并放在锚标签的顶部。

解决此问题的一种简单方法是在内容上设置负z-index。

#content {
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index:-1;
}
a {
  width: 100%;
}
a:hover {
  font-size: 23pt;
}

<a>HOME</a>
<div id="content">
</div>

Answer 2

这是因为fixed元素在您的<a>上方。将z-index放置。

#content {
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .3);
    z-index: 5;
}
a {
    width: 100%;
    position: relative;
    z-index: 6;
}
a:hover {
    font-size: 23pt;
}

<a>HOME</a>
<div id="content">
</div>

Answer 3

只需将锚点移动 您的 fixed div之后，然后将锚定设置为具有 position: absolute 因此可以在Div

上渲染

#content {
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
}
a {
  position: absolute;
  width: 100%;
}
a:hover {
  font-size: 23pt;
}

<div id="content">
</div>
<a>HOME</a>

---

使用多个可能的z indexes(似乎也是第一次解决该问题的 solve (是有点 tricky 一旦您开始向DOM添加越来越多的元素，就可以导致您处于不希望的情况"情况