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 为当前最高层级