纯CSS解决方案

Question

我正在创建一个CSS悬停下拉菜单。我有一个搜索图标，也有悬停在它上面。当您将鼠标悬停在图标上时，它会下拉输入以进行搜索。但是，当鼠标离开该区域时，搜索框会消失。只要光标在输入字段内，或者输入被聚焦，就要保持盒子在那里。我可能最终只是在搜索菜单图标上进行切换，如果这是最好的选择，但宁愿让它按照前面的说明工作，所以如果你点击屏幕上的其他地方就会消失。

如果你需要我发布我刚刚告诉我的内容，但基本上这只是标准的纯CSS悬停下拉菜单，这是基本的html设置：

<li class="search">

      <ul class="search"> 

               <li><input placeholder="enter search" action=""></li>

所以它有效，但就像我说的那样，当你离开时，即使光标闪烁，它也会再次隐藏。寻找一些方法来保持活跃。我假设我需要某种JavaScript来完成这项工作，但不知道从哪里开始。这是我的第一篇文章，所以如果我弄乱某种协议，我道歉。

谢谢！

Answer 1

你可以使用javascript来添加和删除一个类到

的效果

    $( ".search" ).onmouseenter( function() {
        $( "input" ).addClass( "seeMe" ).focus();
    });

    $( "input" ).blur( function() {
        $( this ).removeClass( "seeMe" );
    });

这使得输入可见，当您将鼠标悬停在搜索li上时将其置于焦点，并在输入失去焦点时隐藏

在我的jsFiddle

上查看此修改后的版本

Answer 2

纯CSS解决方案

无需JavaScript。使用纯CSS。我将使用O作为搜索图标。我还为可视化其碰撞盒添加了边框元素。

请查看此答案底部的进一步阅读部分，以获取更多说明。

解决方案

.search {
  list-style: none;
  padding: 0;
  width: fit-content;
  border: 1px solid black;
  /*border added to visualise collision box*/
}

.search-bar {
  display: none;
}

.search-icon {
  width: fit-content;
  border: 1px solid red;
  /*border added to visualise collision box*/
}

.search-icon:hover+.search-bar {
  display: block;
}

.search-bar:hover {
  display: block;
}

<ul class="search">
  <li class="search-icon">O</li>
  <li class="search-bar"><input placeholder="enter search" action=""></li>
</ul>

动画解决方案

.search {
  list-style: none;
  padding: 0;
  width: fit-content;
  border: 1px solid black;
  /*border added to visualise collision box*/
}

.search-bar {
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: all 200ms ease-in;
}

.search-icon {
  width: fit-content;
  border: 1px solid red;
  /*border added to visualise collision box*/
}

.search-icon:hover+.search-bar {
  opacity: 1;
  width: 100px;
}

.search-bar:hover {
  opacity: 1;
  width: 100px;
}

<ul class="search">
  <li class="search-icon">O</li>
  <li class="search-bar">
    <input placeholder="enter search" action="">
  </li>
</ul>

使用搜索框创建一个CSS下拉菜单，从搜索图标中弹出....

2 个答案:

纯CSS解决方案

解决方案

动画解决方案

进一步阅读