在悬停另一个 div 时显示 div

Question

I have this menu:我有这个菜单：

and I need that when hover on every item, another div show over it like this:我需要将鼠标悬停在每个项目上时，另一个 div 会像这样显示在它上面：

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.我已经尝试将 div 放在每个路由器链接中并将其放入 z-index，还使用 css 修改显示，在悬停时从“display：none”变为“display：block”，但还没有任何效果。

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>

Answer 1

 <!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>

在悬停另一个 div 时显示 div

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-07-29 00:05:02

在悬停另一个 div 时显示 div

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-07-29 00:05:02

解决方案1
1 已采纳 2021-07-29 00:05:02