Html 为什么链接在使用列表时不重定向用户？

嘿，伙计们，我正在用css/html做一些动画实验。我是相当新的，想知道为什么链接不工作。动画效果很好，光标是指针，但当按下链接时，链接不会带您到任何地方，即使它位于锚定标记中。我试着在z-index上乱搞，但我什么都能弄明白。任何帮助都将不胜感激

。社交媒体列表{
位置：相对位置；
字体大小：1.5rem；
文本对齐：居中；
宽度：100%；
}
.社交媒体列表李a{
颜色：#fff；
}
.社交媒体列表李{
位置：相对位置；
排名：0；
左：-20px；
显示：内联块；
高度：70像素；
宽度：70px；
利润率：10px自动；
线高：70px；
边界半径：50%；
颜色：#fff；
背景色：rgb（27,27,27）；
光标：指针；
转换：所有.2易入易出；
}
.社交媒体列表李：之后{
内容：''；
位置：绝对位置；
排名：0；
左：0；
宽度：70px；
高度：70像素；
线高：70px；
边界半径：50%；
不透明度：0；
盒影：0 1px#fff；
转换：所有.2易入易出；
}
.社交媒体列表李：悬停{
背景色：#fff；
}
.社交媒体列表李：悬停：之后{
不透明度：1；
转换：比例（1.12）；
过渡计时功能：立方贝塞尔（0.37,0.74,0.15,1.65）；
}
.社交媒体列表李：悬停a{
颜色：#111；
}

看起来你的锚定标签在所有东西的后面，需要显示块才能看到它

由于锚定标记是一个内联元素，如果向其添加绿色边框，则在添加显示块时会得到以下结果：

因此，现在只需添加

height:100%

，它就可以覆盖元素

.social-media-list li a {
  color: #fff;
  display:block; // NEW
  height:100%; // NEW
  z-index:500; // NEW
  position: relative; // NEW
}

---

但是，如果您将li样式移动到a标记上，看起来大部分内容都已由您处理。

看起来您的定位标记位于所有内容的后面，并且需要显示块才能看到它

由于锚定标记是一个内联元素，如果向其添加绿色边框，则在添加显示块时会得到以下结果：

因此，现在只需添加

height:100%

，它就可以覆盖元素

.social-media-list li a {
  color: #fff;
  display:block; // NEW
  height:100%; // NEW
  z-index:500; // NEW
  position: relative; // NEW
}

---

但是，如果您将li样式移动到a标记中，看起来大部分内容都已由您处理。

您可以在代码中改进许多内容。首先，为什么要在之后使用绝对的

：？您可以直接为
li
设置样式：

。社交媒体列表li{
位置：相对位置；
排名：0；
左：-20px；
显示：内联块；
利润率：10px自动；
颜色：#fff；
背景色：rgb（27,27,27）；
宽度：70px；
高度：70像素；
线高：70px；
边界半径：50%；
盒影：0 1px#fff；
光标：指针；
转换：所有.2易入易出；
}

然后，您只需确保链接占用所有空间：

。社交媒体列表LIA{
显示器：flex；
证明内容：中心；
颜色：#fff；
宽度：100%；
身高：100%；
}

给你：


。社交媒体列表{
位置：相对位置；
字体大小：1.5rem；
文本对齐：居中；
宽度：100%；
}
.社交媒体列表李a{
显示器：flex；
证明内容：中心；
颜色：#fff；
宽度：100%；
身高：100%；
}
.社交媒体列表李{
位置：相对位置；
排名：0；
左：-20px；
显示：内联块；
利润率：10px自动；
颜色：#fff；
背景色：rgb（27,27,27）；
宽度：70px；
高度：70像素；
线高：70px；
边界半径：50%；
盒影：0 1px#fff；
光标：指针；
转换：所有.2易入易出；
}
.社交媒体列表李：悬停{
背景色：#fff；
}
.社交媒体列表李：悬停a{
颜色：#111；
}







您可以在代码中改进多种内容。首先，为什么要在

之后使用绝对的

：？您可以直接为
li
设置样式：

。社交媒体列表li{
位置：相对位置；
排名：0；
左：-20px；
显示：内联块；
利润率：10px自动；
颜色：#fff；
背景色：rgb（27,27,27）；
宽度：70px；
高度：70像素；
线高：70px；
边界半径：50%；
盒影：0 1px#fff；
光标：指针；
转换：所有.2易入易出；
}

然后，您只需确保链接占用所有空间：

。社交媒体列表LIA{
显示器：flex；
证明内容：中心；
颜色：#fff；
宽度：100%；
身高：100%；
}

给你：


。社交媒体列表{
位置：相对位置；
字体大小：1.5rem；
文本对齐：居中；
宽度：100%；
}
.社交媒体列表李a{
显示器：flex；
证明内容：中心；
颜色：#fff；
宽度：100%；
身高：100%；
}
.社交媒体列表李{
位置：相对位置；
排名：0；
左：-20px；
显示：内联块；
利润率：10px自动；
颜色：#fff；
背景色：rgb（27,27,27）；
宽度：70px；
高度：70像素；
线高：70px；
边界半径：50%；
盒影：0 1px#fff；
光标：指针；
转换：所有.2易入易出；
}
.社交媒体列表李：悬停{
背景色：#fff；
}
.社交媒体列表李：悬停a{
颜色：#111；
}







您已经设置了
li
的样式，而不是
a
的样式，因此链接将非常小，您无法单击它。您需要将样式应用于链接，而不是列表项您已对
li
和
a
设置了样式，因此链接将非常小，您无法单击它。您需要将样式应用于链接，而不是列表项