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