【CSS】链接<a>点击不了,点击没反应,可能是被其他元素遮挡住了

有过js控制点击不生效的时候吗,这时就要考虑你的元素是否被其他元素遮挡了。这里说的遮挡并不是看不到。而是能看到,却无法透过另一元素选中它。
可以试一下以下两种方案:
1、css调节z-index
首先要考虑的是更外层的元素遮挡了靠里层的元素。比如外层遮挡为一个div(.card)被遮挡的是一个input框为(.input-space)
这时就要把遮挡它的元素的css中的z-index调的比他要低,假设:外层遮挡的类名为:card,被遮挡的input的类名为:input-space。

.card{
    z-index:1;
}
.input-space{
    z-index:2;
}

2、写完之后看input框能不能选到(点击事件生不生效)。如果还是选不到(点击事件不生效),就在这个基础上为card再加一层css, pointer-events:none,此css以为鼠标事件对当前元素无效。

.card{
    pointer-events: none;
}

这样一来点击事件会直接略过卡片,所以就能直接选择到输入框了。

原文作者:ParadiserD
博客链接:https://blog.csdn.net/ParadiserD/article/details/78404132

你可能感兴趣的:(#,HTML+CSS,javascript)