悬停时,应该在导航栏下方显示搜索栏,并且导航栏和搜索栏的背景颜色相同,即白色。
使用CSS HTML和jquery实现此目标的最佳选择是什么?
navbar
<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>
navbar
的CSS .navbar-brand {
color: white;
font-size: 32px;
font-weight: bolder;
}
.nav-link,
.hamburger {
color: white !important;
}
.nav-linkWhenScrolledAndHovered {
color: black !important;
}
/* CHANGING THE BACKGROUND COLOR WHEN SCROLLED */
.navbarColorWhenScrolledAndHovered {
background-color: white !important;
}
.navbarColorWhenNotScrolled {
background-color: transparent !important;
}
navbar
的jQuery $(document).ready(function () {
$(window).scroll(function () {
// check if scroll event happened
if ($(document).scrollTop() > 50) {
// check if user scrolled more than 50 from top of the browser window
//this is for just the navbar. class is added to the navbar when not scrolled, which makes the navbar bg -color transparent.
$(".navbar").addClass("navbarColorWhenScrolledAndHovered");
//for all the nav-links
$(".nav-link, .hamburger").addClass("nav-linkWhenScrolledAndHovered");
} else {
//removing transparent bg-color when not scrolled. And gets the default value "transparent" color
$(".navbar").removeClass("navbarColorWhenScrolledAndHovered");
$(".nav-link, .hamburger").removeClass("nav-linkWhenScrolledAndHovered");
}
});
});
$(".navbar").hover(function () {
$(".navbar").addClass("navbarColorWhenScrolledAndHovered");
$(".nav-link, .hamburger").addClass("nav-linkWhenScrolledAndHovered");
},function(){
$(".navbar").removeClass("navbarColorWhenScrolledAndHovered");
$(".nav-link, .hamburger").removeClass("nav-linkWhenScrolledAndHovered");
});
最重要的是我想要实现所需目标的逻辑?
答案 0 :(得分:0)
我找到了一个视频,希望它可以为您提供帮助 https://www.youtube.com/watch?v=v1PeTDrw6OY 但是我认为您应该使用jquery addclass,以便可以在移动设备上使用