时间戳

首页 > 解决方案 > 如何在另一个 div 上方添加隐藏的 div？

html - 如何在另一个 div 上方添加隐藏的 div？

问题描述

情况：

在顶部我有一个navbar，然后是一个carousel。
导航条码

 <nav class="navbar navbar-expand-lg navbar-light  fixed-top">
  <a class="navbar-brand order-0 nav-link" href="#">DASA</a>
  <div class="collapse navbar-collapse text-right order-lg-0 order-last" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link menWomenKidsHeading" href="#">MEN <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link menWomenKidsHeading" href="#">WOMEN</a>
      </li>
      <li class="nav-item">
        <a class="nav-link menWomenKidsHeading" href="#">KIDS</a>
      </li>
    </ul>
  </div>
  <a class="nav-link" href="#"><i class="fas fa-search "></i></a>
  <a class="nav-link" href="#"><i class="fas fa-user "></i></a>
  <a class="nav-link" href="#"><i class="fas fa-shopping-bag "></i></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="">
      <i class="fas fa-bars hamburger"></i>
    </span>
  </button>
</nav>

轮播代码

    <div id="carouselExampleCaptions1" class="carousel slide like" data-ride="carousel like">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions1" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions1" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions1" data-slide-to="2"></li>
    <li data-target="#carouselExampleCaptions1" data-slide-to="3"></li>
    <li data-target="#carouselExampleCaptions1" data-slide-to="4"></li>
  </ol>
  <div class="carousel-inner">
    <!-- first item RED ANCHARA -->
    <div class="carousel-item active">
      <div class="firstBanner" style="background-image: url(images/IMG_2124.JPG);"></div>
      <div class="carousel-caption d-block">
        <h4 class="headingClothShortDescription">
          ANCHARA WITH RED BOUTIQUE
        </h4>
        <button type="button" name="button" class="carousel-button">
          SHOP ANCHARA
        </button>
      </div>
    </div>
    <!-- second item KIDS -->
    <div class="carousel-item">
      <div class="firstBanner" style="background-image: url(images/group.jpg);"></div>
      <div class="carousel-caption d-block">
        <h4 class="headingClothShortDescription">ANCHARA FOR KIDS</h4>
        <button type="button" name="button" class="carousel-button">
          SHOP KIDS
        </button>
      </div>
    </div>
    <!-- third item MULTI-COLOR ANCHARA-->
    <div class="carousel-item">
      <div class="firstBanner" style="background-image: url(images/anchara1.jpg);"></div>
      <div class="carousel-caption d-block">
        <h4 class="headingClothShortDescription">MULTI-COLOR ANCHARA</h4>
        <button type="button" name="button" class="carousel-button">
          SHOP WOMEN
        </button>
      </div>
    </div>
    <!-- fourth item dHOTI-->
    <div class="carousel-item">
      <div class="firstBanner" style="background-image: url(images/hrithik.JPG);"></div>
      <div class="carousel-caption d-block">
        <h4 class="headingClothShortDescription">MARRIAGE DHOTI</h4>
        <button type="button" name="button" class="carousel-button">
          SHOP DHOTI
        </button>
      </div>
    </div>
    <!-- fifth item CUSTOMIZE YOUR CLOTHES-->
    <div class="carousel-item">
      <div class="firstBanner" style="background-image: url(images/20190910_120902.jpg);"></div>
      <div class="carousel-caption d-block">
        <h4 class="headingClothShortDescription">STYLE YOUR CLOTHES</h4>
        <button type="button" name="button" class="carousel-button">
          CUSTOMIZE NOW
        </button>
      </div>
    </div>
  </div>

  <a class="carousel-control-prev" href="#carouselExampleCaptions1" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions1" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

我想：

旋转木马上方的隐藏 div，当用户将鼠标悬停在导航栏上时，它应该出现在带有彩色 div 的旋转木马上方。 如何使用 html、css 和 jq 实现这一点？ 但随时提出任何建议。请参考此代码层代码。 https://www.codeply.com/p/Mqp1NSjuMz

标签： htmljquerycss

解决方案

从它的声音来看，您的轮播直接在导航之后。如果是这种情况，你可以在 css 中使用相邻的兄弟选择器，不需要 js：

.hidden {
  display: none;
  background: blue;
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.carousel {
  position: relative;
}

.nav:hover+.carousel .hidden {
  display: block;
}
<div class="nav">nav bar</div>

<div class="carousel">
  <div class="hidden">hidden div</div>carousel
</div>

推荐阅读