点击a标签包裹的绝对定位的元素不触发a链接跳转的处理

有时需要在a标签下使用绝对定位来布局，此时a标签包裹的绝对定位的元素可能会导致出现“无法跳转区域”，如：

<style> .wrap { position: relative; cursor: pointer; background-color: #fff; border: 20px solid #fff; margin-bottom: 0.3rem; } .wrap .txt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 40px; line-height: 40px; text-align: center; } </style> <a href="#" class="wrap"> <div class="img-box"> <img src="./assets/images/muchengyuzhong/wenlv/3-1.jpg" alt="博物馆"> </div> <div class="txt">博物馆</div> </a>

点击a标签下的div.txt元素，并不会触发a标签的链接跳转。

解决方法添加”pointer-events: none;”

<style> .wrap .txt { pointer-events: none; } </style>