Question

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

您应该知道，我已经将原始代码缩减为以下几行。但是它们每个都像“内容” 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

由于h1，#content div已从正常DOM绘制流程中移出，并位于锚标记的顶部。

解决此问题的一种简单方法是在内容上设置否定position:fixed。

z-index

#content {
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index:-1;
}

a {
  width: 100%;

}

a:hover {
  font-size: 23pt;
}

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

只需将锚定移动到固定 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索引设置为多个元素时，使用多个正z索引（似乎也第一次解决的问题）有点棘手。一旦开始向您的dom中添加越来越多的元素，可能会导致您遇到不希望的情况，并且将被迫为每个新元素设置特定的z索引（请小心更改每次z索引号，以避免出现新的“重叠元素” “情况

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

3 个答案: