解决CSS中鼠标移入到某个元素其子元素被遮挡的问题

我们在开发中经常遇到一种场景,就是给元素加提示信息,就是鼠标移入到盒子上面时,会出现提示信息这一功能,如果我们给盒子加了hover,当鼠标移入到盒子上时,让他往上移动5px,即transform: translateY(-5px), 同时还让提示信息展示出来,此时受到transform的影响,提示信息会被父盒子遮挡住。代码如下:

<template>
  <div class="container">
    <div
      class="item"
      v-for="item in 30"
      @mouseenter="showTooltip"
      @mouseleave="hideTooltip"
    >
      <div class="tooltip"></div>
      <span>{{ item }}</span>
    </div>
  </div>
</template>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
  width: 1145px;
  margin: 0 auto;
  padding: 10px;
}
.item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  background-color: #eceff7;
  border-radius: 10px;
  margin: 10px;
  box-shadow: 0 3px 5px 2px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.5s ease;;
}

.item .tooltip {
  display: none;
  width: 100px;
  height: 30px;
  background-color: #000;
  border-radius: 6px;
  position: absolute;
  bottom: -50px;
  z-index: 10;
}
.item .tooltip::after {
  position: absolute;
  left: 0;
  top: -25px;
  width: 0;
  height: 0;
  left: 50%;
  transform: translateX(-50%);
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 15px solid transparent;
  border-bottom: 15px solid #000;
  content: "";
  z-index: 20px;
}
.item:hover {
  transform: translateY(-5px);
}
.item:hover .tooltip {
  display: block;
}
</style>

在这里插入图片描述
我们可以看到,我们给tooltip设置了z-index值为10,但是黑色提示信息依然被挡住了,原因时当hover时,执行了transform, 会改变元素的层级,
此时我们只需要给 .item:hover 加上一句 z-index: 1, 保证hover的时候,层级比item更低,就能解决这个问题。

<template>
  <div class="container">
    <div
      class="item"
      v-for="item in 30"
      @mouseenter="showTooltip"
      @mouseleave="hideTooltip"
    >
      <div class="tooltip"></div>
      <span>{{ item }}</span>
    </div>
  </div>
</template>
<style>
.container {
  display: flex;
  flex-wrap: wrap;
  width: 1145px;
  margin: 0 auto;
  padding: 10px;
}
.item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  background-color: #eceff7;
  border-radius: 10px;
  margin: 10px;
  box-shadow: 0 3px 5px 2px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.5s ease;;
}

.item .tooltip {
  display: none;
  width: 100px;
  height: 30px;
  background-color: #000;
  border-radius: 6px;
  position: absolute;
  bottom: -50px;
  z-index: 10;
}
.item .tooltip::after {
  position: absolute;
  left: 0;
  top: -25px;
  width: 0;
  height: 0;
  left: 50%;
  transform: translateX(-50%);
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 15px solid transparent;
  border-bottom: 15px solid #000;
  content: "";
  z-index: 20px;
}
.item:hover {
  z-index: 1; /* 保证hover的时候z-index层级更低 */
  transform: translateY(-5px);
}
.item:hover .tooltip {
  display: block;
}
</style>

此时我们再看效果:
在这里插入图片描述

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

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

相关文章

2024年下载排行第一的数据恢复软件EasyRecovery

EasyRecovery数据恢复软件是一款功能强大的数据恢复工具&#xff0c;它能够帮助用户恢复因各种原因丢失的数据&#xff0c;无论是误删除、格式化、分区丢失还是其他存储介质故障&#xff0c;都能得到很好的解决。 使用EasyRecovery进行数据恢复&#xff0c;用户只需按照简单的…

租用境外服务器,越南服务器的优势有哪些

自从中国加入世界贸易组织之后&#xff0c;国内经济增加速度非常快&#xff0c;同时越来越多的人选择去东南亚国家发展&#xff0c;因为当地的中国人很多&#xff0c;所以中国企业在当地面临着更小的文化差异。东南亚地区也是最新的经济体&#xff0c;互联网正处于蓬勃发展的阶…

【日志跟踪】SpringBoot实现简单的日志链路追踪

引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j&l…

Java编译期注解处理器AbstractProcessor使用

我们接触的注解主要分为以下两类 运行时注解&#xff1a;通过反射在运行时动态处理注解的逻辑编译时注解&#xff1a;通过注解处理器在编译期动态处理相关逻辑 编译期注解我们常用的有Lombok&#xff0c;在class文件中自动生成get和set方法 解编译期处理流程最关键的一个类就…

数字乡村创新实践探索农业现代化与乡村振兴新路径:科技赋能农村全面振兴与农民福祉新纪元

目录 引言 一、数字乡村与农业现代化新路径 1、智慧农业引领农业现代化 2、农业产业链的数字化转型 二、数字乡村与乡村振兴新路径 1、农村信息化水平的提升 2、农村治理模式的创新 三、科技赋能农村全面振兴与农民福祉新纪元 1、提升农业生产效益与农民收入 2、促进…

【Qt 学习笔记】Qt常用控件 | 按钮类控件Push Button的使用及说明

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ Qt常用控件 | 按钮类控件Push Button的使用及说明 文章编号&#xff1…

路径规划 | 基于蜣螂优化算法的无人机三维路径规划(Matlab)

目录 效果一览基本介绍程序设计参考文献 效果一览 基本介绍 基于蜣螂优化算法的无人机三维路径规划【23年新算法应用】可直接运行 Matlab语言 1.读取地形数据&#xff0c;利用蜣螂算法DBO优化三维路径&#xff0c;目标函数为总路径最短&#xff0c;同时不能撞到障碍物&#xff…

Android Studio使用USB真机调试详解

本文为大家分享了Android Studio使用USB真机调试的具体方法&#xff0c;供大家参考&#xff0c;具体内容如下 以小米4为例&#xff0c;先将手机通过USB连接电脑&#xff0c;在设备管理器中确保驱动安装正确。 对手机的设置 1.设置手机为开发者模式&#xff08;设置- 关于手机…

windows应急响应基础知识

一、系统排查 1、系统详细信息 systeminfo2、网络链接 netstat -ano LISTENING 服务启动后首先处于侦听 ESTABLISHED 建立连接。表示两台机器正在通信。 CLOSE_WAIT 对方主动关闭连接或者网络异常导致连接中断&#xff0c;这时我方的状态会变成CLOSE_WAIT 此时我方要调用…

如何查找overlayfs对应的POD如何根据pod找到containerd id

如何查找overlayfs对应的POD mount |grep overlayfs | grep 1738 ctr -n k8s.io c list | grep 11ac4083419be11174746b68d018a0a402d9ae43c6b52125810fe1ec7db63bc6 查找目录并统计大小 find / -name "jfsCache" -exec du -sh {} | sort -rh如何根据pod找到c…

HarmonyOS4-网络连接-http请求数据

使用Axios发送请求&#xff1a; 详细资料来源于官方文档。

java数据结构与算法刷题-----LeetCode338. 比特位计数

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 位运算统计1的个数动态规划 位运算统计1的个数 &#x1f3c6;Le…

2023年图灵奖揭晓,你怎么看?

Avi Wigderson——理论计算机科学的先锋&#xff0c;荣获2023年图灵奖 在科技界&#xff0c;图灵奖堪称与诺贝尔奖齐名的崇高荣誉&#xff0c;它每年授予对计算机行业的贡献达到重大突破的个人或团队。今年&#xff0c;这一声誉卓著的奖项被授予了普林斯顿大学的数学教授 Avi …

上位机图像处理和嵌入式模块部署(树莓派4b安装opencv)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 树莓派4b上面安装的镜像应该是debian系统&#xff0c;本身是可以用apt-get进行软件下载的。这一点对于我们来说就非常的方便。因为&#xff0c;如果…

毕设选51还是stm32?51太简单?

如果你更倾向于挑战和深入学习&#xff0c;STM32可能是更好的选择。如果你希望更专注于底层硬件原理&#xff0c;51可能更适合。我这里有一套嵌入式入门教程&#xff0c;不仅包含了详细的视频讲解&#xff0c;项目实战。如果你渴望学习嵌入式&#xff0c;不妨点个关注&#xff…

Spring Boot | SpringBoot对 “SpringMVC“的 “整合支持“、SpringMVC“功能拓展实现“

目录: SpringMVC 的 “整合支持” ( 引入"Web依赖启动器"&#xff0c;几乎可以在无任何额外的配置的情况下进行"Web开发")1.SpringMVC "自动配置" 介绍 ( 引入Web依赖启动器"后&#xff0c;SpringBoot会自动进行一些“自动配置”&#xff0…

计算机网络 Cisco路由器基本配置

一、实验内容 1、按照下表配置好PC机IP地址和路由器端口IP地址 2、配置好路由器特权密文密码“abcd&#xff0b;两位班内序号”和远程登录密码“star” 3、验证测试 a.验证各个接口的IP地址是否正确配置和开启 b.PC1 和 PC2 互ping c.验证PC1通过远程登陆到路由器上&#…

Linux笔记之查看docker容器目录映射

Linux笔记之查看docker容器目录映射 —— 2024-04-15 code review! docker inspect 容器ID或容器名 | grep -A 20 Mounts实践 grep -A 参数详解&#xff1a; grep 的 -A 参数用于在输出中包括匹配行后的指定数目的行。 使用 -A 参数 该参数的基本语法如下&#xff1a; …

[大模型]InternLM2-7B-chat FastAPI 部署

InternLM2-7B-chat FastAPI 部署 InternLM2 &#xff0c;即书生浦语大模型第二代&#xff0c;开源了面向实用场景的70亿参数基础模型与对话模型 &#xff08;InternLM2-Chat-7B&#xff09;。模型具有以下特点&#xff1a; 有效支持20万字超长上下文&#xff1a;模型在20万字…

Mini-Gemini: 探索多模态视觉语言模型的新境界

一、背景 在数字化时代&#xff0c;人工智能的发展正以前所未有的速度推进。特别是在多模态学习领域&#xff0c;结合视觉和语言的能力已成为研究的热点。最近&#xff0c;一篇名为“Mini-Gemini: Mining the Potential of Multi-modality Vision Language Models”的文章在arX…