通过css设置元素隐藏和显示

背景:鼠标悬浮时显示删除,放开后显示组件名

解决:通过display:none和display:block显示和隐藏元素;

使用 div +p选择器选择当前div的下一个紧跟的p元素

    <div v-if="!preview" class="name">{{propertyData.name}}</div>

    <!-- 删除按钮 -->
    <div v-if="!preview" class="delete">删除</div>

.component {
  position: relative;
  cursor: move;
  min-height: 40px;

  // name和delete显示效果
  .name,
  .delete {
    padding: 4px 12px;
    background: #fff;
    position: absolute;
    white-space: nowrap;
    border: 2px;
    height: 18px;
    border-radius: 2px;
    line-height: 18px;
    cursor: pointer;
    font-size: 12px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    color: #323232;
    left: 380px;
    top: 0;
    // 左侧设置透明的三角形
    &::before {
      content: "";
      line-height: 8px;
      position: absolute;
      left: -8px;
      // 父元素的一半9px
      top: 9px;
      // 一边设置透明
      border-width: 4px;
      border-style: solid;
      border-color: transparent #fff transparent transparent;
    }
  }

  // name和delete显示和隐藏交互
  .name {
    display: block;
  }
  .delete {
    display: none;
  }
  // 不能以name:hover 去让.delete显示,而是让父级hover时就显示delete,这样就不会在显示和隐藏之间反复横跳
  &:hover {
    .name {
      display: none;
    }
    // div+p选择所有紧跟在 <div> 元素之后的第一个 <p> 元素
    .delete {
      display: block;
    }
  }

}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

java每日一记 —— 浅浅的说下在Lombok中遇到的一个坑

今天说下Lombok 1.先谈谈Lombok吧2.来聊聊为什么有些公司不喜欢用Lombok3.聊点废话 本篇代码在jdk11中测试通过&#xff0c;Lombok版本使用的是1.18.20 昨天写注解时提到了一下Lombok&#xff0c;然而最近写毕业论文又因为Lombok踩过几次坑&#xff0c;所以今天来聊聊 1.先谈谈…

windows10关闭自动更新

windows10关闭自动更新 下载策略组改配置组配置 下载策略组 我自己的电脑里没有这个文件gpedit.msc所以要下载 pushd "%~dp0"dir /b C:\Windows\servicing\Packages\Microsoft-Windows-GroupPolicy-ClientExtensions-Package~3*.mum >List.txtdir /b C:\Windows…

[uni-app]记录APP端跳转页面自动滚动到底部的bug

文章目录 bug描述原因分析: 处理方案 bug描述 1.点击的A页面, 跳转到了B页面, 第一次页面正常显示 2.从B页面返回A页面 3.A页面不进行任何操作,再次点击A页面进入B页面 4.B页面自动滚动到底部. 原因 看一段A页面代码 let that thisthis.defaultScrollTop uni.getStorageSy…

OpenAI内斗剧情反转!微软力保ChatGPT之父回归?

美东时间11月17日下午&#xff0c;全球最热门的聊天机器人ChatGPT开发商OpenAI宣布了一项重磅管理层调整&#xff0c;Sam Altman将辞去CEO一职&#xff0c;并离开公司董事会。 Altman被踢出的消息除了让业界担心会影响该公司未来发展外&#xff0c;OpenAI另一位共同创办人暨总裁…

Linux学习第43天:Linux 多点电容触摸屏实验:难忘记第一次牵你手的温存

Linux版本号4.1.15 芯片I.MX6ULL 大叔学Linux 品人间百味 思文短情长 人都是性情中人&#xff0c;如果把学习当做自己的女朋友&#xff0c;对她细致入微、掏心掏肺、有耐心有恒心&#xff0c;终会修成正果。 而我们本节需要学习的电…

idea导入javaweb变成灰色

解决办法&#xff1a; 如果这时候src是蓝色&#xff0c;其余都是灰色文件夹&#xff0c;这时候要先把src文件夹变成灰色&#xff0c;否则之后会报错 src文件变成灰色方法&#xff0c;右键src,选择make direcory as 选择unmark 如果src不是蓝色&#xff0c;就是灰色&#xff0…

《C++PrimePlus》第8章 函数探幽

8.1 内联函数 使用内联函数 #include <iostream> using namespace std;inline double square(double x) { return x * x; }int main(){double a;a square(5.0);cout << "a " << a << endl;return 0; } 8.2 引用变量 将引用用作函数参数&…

软件数据采集使用代理IP的好处用哪些?

随着互联网的快速发展&#xff0c;越来越多的企业开始通过软件数据采集来获取目标客户的信息。然而&#xff0c;在进行数据采集的过程中&#xff0c;由于不同网站的访问规则和限制&#xff0c;经常会遇到一些问题。这时候&#xff0c;使用代理IP就可以很好地解决这些问题。下面…

自然语言处理:Transformer与GPT

Transformer和GPT&#xff08;Generative Pre-trained Transformer&#xff09;是深度学习和自然语言处理&#xff08;NLP&#xff09;领域的两个重要概念&#xff0c;它们之间存在密切的关系但也有明显的不同。 1 基本概念 1.1 Transformer基本概念 Transformer是一种深度学…

Kettle 简介

1. PDI结构简介 图 1‑1 PDI核心组件 Spoon是构建ETL Jobs和Transformations的工具。Spoon可以以拖拽的方式图形化设计&#xff0c;能够通过spoon调用专用的数据集成引擎或者集群。 Data Integration Server是一个专用的ETL Server&#xff0c;它的主要功能有&#xff1a; 功能…

数据库系统原理与实践 笔记 #9

文章目录 数据库系统原理与实践 笔记 #9存储管理与索引文件和记录的组织文件组织定长记录变长记录分槽的页结构文件中记录的组织顺序文件组织多表聚簇文件组织 数据库系统原理与实践 笔记 #9 存储管理与索引 文件和记录的组织 文件组织 数据库是以一系列文件的形式存储的。…

羊大师:冬季有哪些宅家必备?

羊大师&#xff1a;冬季有哪些宅家必备&#xff1f; 寒冷的冬天&#xff0c;宅在家里是舒适的选择。但是长时间的久坐却会让我们的身体变得僵硬&#xff0c;缺乏运动会导致身体机能下降。为了保持健康且舒服的状态&#xff0c;羊大师建议我们应该在家里进行一些简单又有效的运…

竞赛 题目:基于深度学习的人脸表情识别 - 卷积神经网络 竞赛项目 代码

文章目录 0 简介1 项目说明2 数据集介绍&#xff1a;3 思路分析及代码实现3.1 数据可视化3.2 数据分离3.3 数据可视化3.4 在pytorch下创建数据集3.4.1 创建data-label对照表3.4.2 重写Dataset类3.4.3 数据集的使用 4 网络模型搭建4.1 训练模型4.2 模型的保存与加载 5 相关源码6…

拜托!佛系点,你只是给社区打工而已

社区人到年底了各种要写的东西很烦啊&#xff01;突然看到这个&#xff0c;真的谢谢啊&#xff01; 家人们谁懂啊&#xff1f;&#xff01;&#xff01;平时写个东西起码两三天&#xff0c;试了一下这东西&#xff01;输入需求&#xff0c;一键生成&#xff0c;写好了&#xf…

vue年季度月联动筛选(el-cascader实现)

默认显示当年当季当月 <label class"font-weight">时间范围</label> <el-cascaderplaceholder"请选择":options"timeOption"filterableclearablechange-on-selectv-model"timeRange":props"{emitPath: true}&quo…

深眸科技以自研算法+先进硬件,创新打造AI视觉一体化解决方案

工业视觉软硬件一体化解决方案&#xff1a;是以工业AI视觉技术为核心&#xff0c;通过集成工业相机等视觉硬件、电控系统和机械系统等自动化设备以及算法平台等软件应用&#xff0c;为工业自动化降本增效提质。 深眸科技为进一步巩固和加强技术领先优势&#xff0c;创新打造的…

DBeaver连接本地MySQL

原文&#xff1a; DBeaver21.3.0安装与连接本地MySQL_dbeaver创建本地数据库_傅大胖的博客-CSDN博客 其他&#xff1a; mysql 的驱动下载地址&#xff1a; Central Repository: mysql/mysql-connector-java ​​​​​​​

一行代码搞定GPT4.0禁止升级开通

GPT4.0官方停止开通&#xff1f;看我一行代码就搞定他&#xff0c;又可以愉快的充值升级了 首先打开你的chatgpt的界面 正常点击这个升级是没有用的 这个界面中windows用户按键盘的F12打开开发者工具 mac电脑点菜单栏的开发–页面检查 然后输入这一串命令并回车 等待两…

预约按摩小程序功能及使用指南;

小程序预约按摩功能及使用指南&#xff1a; 1. 注册登录&#xff1a;用户可选择通过账号密码或微信一键登录&#xff0c;便捷注册&#xff0c;轻松管理预约服务。 2. 查找店铺&#xff1a;展示附近的按摩店铺信息&#xff0c;用户可根据需求选择合适的店铺进行预约。 3. 选择服…

SpringBoot2—运维实用篇

目录 打包与运行 • 程序打包与运行&#xff08;Windows版&#xff09; • 程序运行&#xff08;Linux版&#xff09; 配置高级 • 临时属性设置 • 配置文件分类 • 自定义配置文件 多环境开发 多环境开发&#xff08;yaml单一文件版&#xff09; 多环境开发&am…