javascript - 在悬停另一个 div 时显示 div
问题描述
我有这个菜单:
我需要将鼠标悬停在每个项目上时,另一个 div 会像这样显示在它上面:
但我还不知道该怎么做。我尝试将 div 放在每个路由器链接中并将其放入 z-index,还使用 css 修改显示,在悬停时从“display:none”变为“display:block”,但还没有任何效果。
这是菜单的当前代码:
<div class="ml-auto p-3 d-none d-lg-flex align-items-center">
<div class="d-flex">
<router-link
class="
routerlink
text-gray-600
hover:text-gray-400
fs-13
mx-2
font-weight-500
"
to="/beer-universe"
>Universo cervecero</router-link
>
</div>
<div class="vl mx-2"></div>
<div class="d-flex">
<router-link
class="
text-gray-600
hover:text-gray-400
fs-13
mx-2
font-weight-500
"
to="/care-benefits"
>Cuidados y beneficios</router-link
>
</div>
<div class="vl mx-2"></div>
<div class="d-flex">
<router-link
class="
text-gray-600
hover:text-gray-400
fs-13
mx-2
font-weight-500
"
to="/betterWorld"
>Un mundo mejor</router-link
>
</div>
<div class="vl mx-2"></div>
<div class="d-flex position-relative justify-content-center">
<router-link
class="
text-gray-600
hover:text-gray-400
fs-13
mx-2
font-weight-500
"
to="/ambassadors"
>Somos embajadores</router-link
>
</div>
<div class="vl mx-2"></div>
<div class="d-flex">
<router-link
class="
text-gray-600
hover:text-gray-400
fs-13
mx-2
font-weight-500
"
to="/linkedin-learning"
>
Entrénate
</router-link>
</div>
<div role="button" class="d-flex mx-2" @click="showSearchBox()">
<span
class="icon-buscar fs-20 mx-2"
:class="showSearch ? 'text-red-400' : 'text-gray-600'"
></span>
</div>
<div role="button" class="mx-2" @click="showHideMenuProfile()">
<img
v-if="user.prof_picture !== null"
class="rounded-circle m-2"
:src="uriResources + '/' + user.prof_picture"
title="Perfil"
width="34"
height="34"
style="object-fit: cover"
/>
<img
v-else
class="rounded-circle m-2"
title="Perfil"
width="34"
height="34"
:src="imgVideo"
/>
</div>
</div>
解决方案
<!DOCTYPE html>
<html>
<head>
<style>
#main {
position: relative;
}
.hide {
display: none;
position: absolute;
left: 40%;
background: rgb(90, 13, 13);
}
.myDIV:hover + .hide {
display: block;
color: red;
}
.myDIV {
border: 2px solid;
background: rgb(202, 100, 100);
cursor: pointer;
height: 15vh;
width: 97px;
display: block;
margin: auto;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div class="myDIV">Hover over</div>
<div class="hide">
<p>Lorem ipsum dolor sit.</p>
<hr />
<p>Lorem ipsum dolor sit.</p>
</div>
</div>
</body>
</html>
推荐阅读
- nestjs - 如何在 Nestjs 中的 typeorm 中正确配置 ormconfig.json 文件上的实体?
- python - 如何使我的列表理解(及其调用的函数)异步运行?
- java - 是否可以使用 Android / Flutter 关闭手机的所有振动?
- paraview - STL 表面上的点云,按元素集成
- regex - Apache Pig 中的正则表达式提取所需数据
- python - spacy 和 train 数据中的 Cased VS uncased BERT 模型
- file - Serilog 未写入从控制台 CORE 3 应用程序中的 appsettings.json 加载的配置的文件
- java - LeetCode 上的 Stock Span 问题是否有更好的解决方案?
- node.js - 使用 Lambda 自动化 NodeJS 应用程序(创建 json 文件)
- flutter - 最佳实践:在 GCF 内调用 Firebase 或在 GCF 之后再调用 Firebase