将鼠标悬停在搜索图标上时如何显示搜索栏？

Question

情况：

我有一个这样的搜索图标，

悬停时，应该在导航栏下方显示搜索栏，并且导航栏和搜索栏的背景颜色相同，即白色。

使用CSS HTML和jquery实现此目标的最佳选择是什么？

代码：

1. 最上面的是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>

1. 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;
}

1. 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");
  

});

问题：

最重要的是我想要实现所需目标的逻辑？

Answer 1

我找到了一个视频，希望它可以为您提供帮助 https://www.youtube.com/watch?v=v1PeTDrw6OY 但是我认为您应该使用jquery addclass，以便可以在移动设备上使用