[分享]css中 点击a标签没反应

在web开发中，经常会遇到点击a标签没有反应的情况，这是因为a标签被其他元素所覆盖或者样式被误设置。下面我们来一一分析解决这些问题。1.元素遮盖问题a { : relative; zindex: 1;...

在web开发中，经常会遇到点击a标签没有反应的情况，这是因为a标签被其他元素所覆盖或者样式被误设置。下面我们来一一分析解决这些问题。

1.元素遮盖问题

a {
    position: relative;
    z-index: 1;
}
其他元素 {
    position: absolute;
    z-index: 0;
} 

当其他元素设置z-index值比a标签小的时候，就会出现a标签无法点击的情况。

2.标签样式误设置

a {
    color: #000000;
    text-decoration: none;
}
a:hover {
    color: #ffffff;
    background-color: #000000;
} 

如果在hover时将a标签的文字颜色设置为和hover时背景一样的颜色，就会出现a标签看起来会像是被点透了一样，实际上是因为文字颜色和背景颜色一样导致了这个问题。

综上，遇到a标签无法点击的情况时，我们应该先检查一下是否有其他元素遮盖了它，其次是检查一下样式是否设置正确。