Блог

Главная - Вопросы по программированию - Показать div при наведении на другой div

Показать div при наведении на другой div

#javascript #html #css #vue.js

Вопрос:

У меня есть это меню:

введите описание изображения здесь

и мне нужно, чтобы при наведении курсора на каждый элемент над ним показывался другой div, вот так:

введите описание изображения здесь

но я пока не могу понять, как это сделать. Я попытался поместить div в каждую ссылку маршрутизатора и присвоить ей z-индекс, также изменив отображение с помощью css, перейдя от «дисплей: нет» к «дисплей: блок» при наведении, но пока ничего не сработало.

Это текущий код меню:

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

Комментарии:

1. Можете ли вы добавить фактическую рабочую версию этого кода, например, в JsFiddle или аналогичную?

2. Я проверю, как это сделать на скрипке, я никогда этого не делал.

Ответ №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>

Комментарии:

1. Спасибо!! Это то, что я искал!

Метки: