I have this menu:
and I need that when hover on every item, another div show over it like this:
but I can't figure it out yet how to do it. I've tried putting the div inside every router-link and put it a z-index, also modifying the display with css, going from "display: none" to "display: block" on hover, but nothing has worked yet.
This is the current code of the menu:
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.