在顶部，我有一个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
从声音上看，您的旋转木马就在导航之后。如果是这种情况，您可以在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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句