css: hover 划过显示/隐藏 div 样式

news2024/11/24 14:40:18

1. 图例: 划过用display: block;和 display: none; 显示div和隐藏div



div:

<div class="sectorBox">

        <div v-for="(item, index) in sectorList" :key="index" class="sill">

          <div class="si_show" :style="{ backgroundImage: 'url(' + item.img1 + ')' }">

            <span>

              <i>{ { item.name }}</i>

              <i>{ { item.conten }}</i>

            </span>

            <div class="i_ing">

              <i span @click="siKnow(item.name)">查看详情 </i>

            </div>

          </div>

          <div class="si_item" :style="{ backgroundImage: 'url(' + item.img + ')' }">

            <img src="item.img1" alt="" />

            <span>{ { item.name }}</span>

            <span>{ { item.conten }}</span>

          </div>

        </div>

      </div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1651639.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【uniapp】阿里云OSS上传 [视频上传]

引用uniapp插件市场的插件,使用的是视频上传 &#xff08;阿里云 oss上传&#xff09; 我只使用了H5和App端&#xff0c;需要后端配置跨域 yk-authpup详情请参考 》》【用户告知权限申请的目的】 【插件市场】阿里云存储OSS前端直接上传(全端通用) - 前端JASON <template>…

链表的回文结构(详解)

链表的回文结构&#xff08;详解&#xff09; 题目&#xff1a; 链表的回文结构 对于一个链表&#xff0c;请设计一个时间复杂度为O(n),额外空间复杂度为O(1)的算法&#xff0c;判断其是否为回文结构。 给定一个链表的头指针A&#xff0c;请返回一个bool值&#xff0c;代表…

机试:字符串相关简单问题

字符移动问题 这道题的描述是这样的&#xff1a;输入一个字符串&#xff0c;将其中的数字字符移动到非数字字符之后&#xff0c;并保持数字字符和非数字字符输入时的顺序。例如&#xff1a;输入字符串“ab4f35gr#a6”,输出为“abfgr#a4356”。 以下使我试着敲的代码&#xff…

GPS与精致农业 无人机应用 农业遥感 农业类

全球定位系统是美国国防部主要为满足军事部门对海上、陆地和空中设施进行高精度导航和定位的要求而建立的。GPS系统最基本的特点是以“多星、高轨、高频、测量-测距”为体制&#xff0c;以高精度的原子钟为核心。GPS作为新一代卫星导航与定位系统&#xff0c;不仅具有全球性、全…

命名空间、C++的输入输出、缺省参数(默认参数)、函数重载

&#x1f436;博主主页&#xff1a;ᰔᩚ. 一怀明月ꦿ ❤️‍&#x1f525;专栏系列&#xff1a;线性代数&#xff0c;C初学者入门训练&#xff0c;题解C&#xff0c;C的使用文章&#xff0c;「初学」C&#xff0c;linux &#x1f525;座右铭&#xff1a;“不要等到什么都没有了…

【Leetcode每日一题】 穷举vs暴搜vs深搜vs回溯vs剪枝_全排列 - 子集(解法2)(难度⭐⭐)(72)

1. 题目解析 题目链接&#xff1a;78. 子集 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 2.算法原理 为了生成一个给定数组 nums 的所有子集&#xff0c;我们可以利用一种称为回溯&#xff08;backtracking&#xff09;的算法…

java项目跑不起来 端口已被使用

背景 Springboot项目跑不起来&#xff0c;原因端口被占用。 解决方法 在 Windows 环境下&#xff0c;你可以按照以下步骤来查看某个端口被占用的情况&#xff0c;并停止相应的进程&#xff1a; 查看所有端口占用情况&#xff1a; 按下 Win R 键&#xff0c;打开运行窗口。…

【八十二】【算法分析与设计】2421. 好路径的数目,928. 尽量减少恶意软件的传播 II,并查集的应用,元素信息绑定下标一起排序,元素通过下标进行绑定

2421. 好路径的数目 给你一棵 n 个节点的树&#xff08;连通无向无环的图&#xff09;&#xff0c;节点编号从 0 到 n - 1 且恰好有 n - 1 条边。 给你一个长度为 n 下标从 0 开始的整数数组 vals &#xff0c;分别表示每个节点的值。同时给你一个二维整数数组 edges &#xff…

1262403-92-8,十三肽DOTA-LGEYGFQNALIVR,是一种具有特定氨基酸序列的多肽

一、试剂信息 名称&#xff1a;DOTA-Leu-Gly-Glu-Tyr-Gly-Phe-Gln-Asn-Ala-Leu-Ile-Val-Arg-COOHCAS号&#xff1a;1262403-92-8结构式&#xff1a; 二、试剂内容 DOTA-Leu-Gly-Glu-Tyr-Gly-Phe-Gln-Asn-Ala-Leu-Ile-Val-Arg-COOH是一种具有特定氨基酸序列的多肽&#xff…

Pspice for TI学习

Pspice for TI中PSpice Part Search空白解决方法 配置环境变量 Cad_PSpice_TI_Regr_Srvr https://software-dl.ti.com/pspice/S009 重新安装2023版的Pspice Pspice安装链接 打开新安装的软件即可发现PSpice Part Search可以正常使用了 VSIN各参赛的含义 VOFF直流偏置VAMPL…

探索大语言模型在信息提取中的应用与前景

随着人工智能技术的快速发展&#xff0c;大语言模型&#xff08;LLMs&#xff09;在自然语言处理&#xff08;NLP&#xff09;领域取得了显著的进展。特别是在信息提取&#xff08;IE&#xff09;任务中&#xff0c;LLMs展现出了前所未有的潜力和优势。信息提取是从非结构化文本…

算法学习:数组 vs 链表

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 &#x1f3af; 引言&#x1f6e0;️ 内存基础什么是内存❓内存的工作原理 &#x1f3af; &#x1f4e6; 数组&#xff08;Array&#xff09;&#x1f4d6; 什么是数组&#x1f300; 数组的存储&#x1f4dd; 示例代码&#…

网页翻译终极方案:DeepLX

为什么要选择 DeepL 翻译&#xff1f; DeepL 被誉为全世界最精准的机器翻译&#xff0c;比最接近他们的竞争对手准确三倍以上 看看 DeepL 和 微软翻译 的对比 &#x1f447;&#x1f447; 三句英文: Walking on eggshells during the software update. Wangs VR game is a…

c#实现音乐的“vip播放功能”

文章目录 前言1. c#窗体2. 功能3. 具体实现3.1 添加文件3.2 音乐播放3.3 其他功能 4. 整体代码和窗口5. 依赖的第三方库 前言 最近在QQ音乐里重温周杰伦的歌&#xff0c;觉得好听到耳朵怀孕&#xff0c;兴起想要下载下来反复听&#xff0c;发现QQ音乐VIP歌曲下载下来的格式居然…

【MsSQL】数据库基础 库的基本操作

目录 一&#xff0c;数据库基础 1&#xff0c;什么是数据库 2&#xff0c;主流的数据库 3&#xff0c;连接服务器 4&#xff0c;服务器&#xff0c;数据库&#xff0c;表关系 5&#xff0c;使用案例 二&#xff0c;库的操作 1&#xff0c;创建数据库 2&#xff0c;创建…

今日早报 每日精选15条新闻简报 每天一分钟 知晓天下事 5月8日,星期三

每天一分钟&#xff0c;知晓天下事&#xff01; 2024年5月8日 星期三 农历四月初一 1、 我国将对法国等12国免签政策延长至2025年底&#xff0c;旅游平台加码布局入境游。 2、 财政部&#xff1a;下拨1582亿元&#xff0c;提高义务教育阶段家庭经济困难学生补助标准。 3、 4月…

STM32窗口看门狗的操作

STM32的窗口看门狗的主要功能是&#xff0c;程序过早的喂狗还有太晚喂狗&#xff0c;都会触发单片机重启&#xff0c;就是有一个时间段&#xff0c;在这个时间段内喂狗才不会触发单片机重启。 下面我就总结一下窗口看门狗的设置过程&#xff1a; 第一步&#xff1a;开启窗口看…

车辆充电桩|基于Springboot+vue的车辆充电桩管理系统的设计与实现(源码+数据库+文档)

车辆充电桩管理系统 目录 基于Springboot&#xff0b;vue的车辆充电桩管理系统设计与实现 一、前言 二、系统设计 三、系统功能设计 1 前台功能模块 4.1.1 首页功能 4.1.2 用户后台管理 2 后台功能模块 4.2.1 管理员功能 4.2.2 维修员功能 四、数据库设计 五、核…

菜鸡学习netty源码(四)—— EventLoopGroup

1.概述 我们前面进行过分析,channel为netty网络操作的抽象类,EventLoop负责处理注册到其上的Channel处理的I/O事件;EventLoopGroup是一个EventLoop的分组,它可以获取到一个或者多个的EventLoop对象。 2.类关系图 NioEventLoopGroup的类继承图,蓝色部分为对应的java类,绿…

jQuery-1.语法、选择器、节点操作

jQuery jQueryJavaScriptQuery&#xff0c;是一个JavaScript函数库&#xff0c;为编写JavaScript提供了更高效便捷的接口。 jQuery安装 去官网下载jQuery&#xff0c;1.x版本练习就够用 jQuery引用 <script src"lib/jquery-1.11.2.min.js"></script>…