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

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

首先明确我们的目标, 就是a标签包裹的内容, 都能点击后以后直接跳转
可以通过更改html结构和css解决:

js 复制代码
      <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为当前最高层级

相关推荐
希忘auto15 小时前
详解Redis的常用命令
redis·1024程序员节
yaosheng_VALVE1 天前
探究全金属硬密封蝶阀的奥秘-耀圣控制
运维·eclipse·自动化·pyqt·1024程序员节
dami_king1 天前
SSH特性|组成|SSH是什么?
运维·ssh·1024程序员节
一个通信老学姐6 天前
专业125+总分400+南京理工大学818考研经验南理工电子信息与通信工程,真题,大纲,参考书。
考研·信息与通信·信号处理·1024程序员节
sheng12345678rui6 天前
mfc140.dll文件缺失的修复方法分享,全面分析mfc140.dll的几种解决方法
游戏·电脑·dll文件·dll修复工具·1024程序员节
huipeng9267 天前
第十章 类和对象(二)
java·开发语言·学习·1024程序员节
earthzhang20217 天前
《深入浅出HTTPS》读书笔记(19):密钥
开发语言·网络协议·算法·https·1024程序员节
爱吃生蚝的于勒8 天前
计算机基础 原码反码补码问题
经验分享·笔记·计算机网络·其他·1024程序员节
earthzhang20218 天前
《深入浅出HTTPS》读书笔记(20):口令和PEB算法
开发语言·网络协议·算法·https·1024程序员节
一个通信老学姐8 天前
专业140+总分410+浙江大学842信号系统与数字电路考研经验浙大电子信息与通信工程,真题,大纲,参考书。
考研·信息与通信·信号处理·1024程序员节