html- a标签包裹img标签, 点击图片无法跳转问题记录及解决方法

html- a标签包裹img标签, 点击图片无法跳转问题记录及解决方法

首先明确我们的目标, 就是a标签包裹的内容, 都能点击后以后直接跳转

可以通过更改html结构和css解决:

<div v-for="(item, index) in newsData" :key="index" class="flexcol"><a :href="item.link" /><img :src="item.cover" class="imgsty" /><div class="content"><p class="tit">{{ item.name }}</p></div></div>.flexcol {position: relative;width: 50%;height: 538px;margin: 0 0 36px;a {position: absolute;z-index: 9;display: inline-block;width: 100%;height: 100%;}.imgsty {width: 344px;height: 260px;}}

这里的解决方式通过把a标签跟img标签的结构改成同级, 然后样式中对a标签添加绝对定位, 并且保证a标签的z-index为当前最高层级