当前位置: 首页 > news >正文

(css)鼠标移入或点击改变背景图片

(css)鼠标移入或点击改变背景图片


在这里插入图片描述


html

<div class="mapTip"><divv-for="(item, index) of legendList":key="index"class="mapTipOne":class="{ active: change === index }"@click="legendHandle(item, index)">{{ item }}</div>
</div>

js

data() {return { ...change: null,};},
methods: { // 点击方法legendHandle(item, index) {this.change = index;},
}

style

// 图例
.mapTip {position: absolute;top: 20px;left: 20px;font-size: 14px;.mapTipOne {width: 150px;height: 30px;background: url("@/assets/images/home-image/mian-right-middle-list-bg0.png")no-repeat;background-position: 0px 0px;background-size: 100% 100%;display: flex;justify-content: center;align-items: center;margin-bottom: 6px;cursor: pointer;}.active,.mapTipOne:hover {background: url("@/assets/images/home-image/mian-right-middle-list-bg1.png")no-repeat;background-position: 0px 0px;background-size: 100% 100%;}
}
http://www.lryc.cn/news/506549.html

相关文章:

  • Unbuntu下怎么生成SSL自签证书?
  • OpenGL ES 03 加载3张图片并做混合处理
  • 深度学习-74-大语言模型LLM之基于API与llama.cpp启动的模型进行交互
  • PyTorch 2.0 中设置默认使用 GPU 的方法
  • 如何在 Ubuntu 22.04 服务器上安装 Jenkins
  • 【一篇搞定配置】如何在Ubuntu上配置单机/伪分布式Hadoop
  • 利用Map集合设计程序,存储城市和对应等级相关信息
  • 【自动驾驶】单目摄像头实现自动驾驶3D目标检测
  • 21 go语言(golang) - gin框架安装及使用(二)
  • Intel(R) Iris(R) Xe Graphics安装Anaconda、Pytorch(CPU版本)
  • 【Unity3D】实现可视化链式结构数据(节点数据)
  • Three.js推荐-可以和Three.js结合的动画库
  • 增强现实(AR)和虚拟现实(VR)的应用
  • 告别机器人味:如何让ChatGPT写出有灵魂的内容
  • 【Threejs】从零开始(六)--GUI调试开发3D效果
  • Cocos Creator 试玩广告开发
  • 快速解决oracle 11g中exp无法导出空表的问题
  • selenium 报错 invalid argument: invalid locator
  • Flink2.0未来趋势中需要注意的一些问题
  • 机械鹦鹉与真正的智能:大语言模型推理能力的迷思
  • 本地电脑使用命令行上传文件至远程服务器
  • 【系统】Windows11更新解决办法,一键暂停
  • 34. Three.js案例-创建球体与模糊阴影
  • Qt同步读取串口
  • 如何用上AI视频工具Sora,基于ChatGPT升级Plus使用指南
  • 对象的状态变化处理与工厂模式实现
  • 关于IP代理API,我应该了解哪些功能特性?以及如何安全有效地使用它来隐藏我的网络位置?
  • 在Linux上将 `.sh` 脚本、`.jar` 包或其他脚本文件添加到开机自启动
  • [Maven]构建项目与高级特性
  • 【系统架构设计师】真题论文: 论数据分片技术及其应用(包括解题思路和素材)