1

我正在创建一个 CSS 悬停下拉菜单。我有一个悬停在其上的搜索图标。当您将鼠标悬停在图标上时，它会下拉一个搜索输入。但是，当鼠标移出该区域时，搜索框就会消失。只要光标在输入字段内，或者输入被聚焦，就希望将框保留在那里。

如果您需要我发布我刚刚让我知道的内容，但基本上只是使用标准的纯 CSS 悬停下拉菜单，这是基本的 HTML 设置：

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

所以它可以工作，但正如我在你离开时所说的那样，即使光标闪烁它也会再次隐藏。我假设我需要某种 JavaScript 来完成这项工作，但不知道从哪里开始。

4

2 回答 2

0

您可以在li使用 JavaScript 时添加和删除一个类。下面的代码jQuery虽然在。

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

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

这使输入可见并在您悬停搜索时为其提供焦点，li并在输入失去焦点时隐藏。

在我的jsFiddle上查看修改后的版本。

于 2012-07-18T20:46:18.447 回答
0

纯 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>

延伸阅读

于 2020-08-11T04:48:19.933 回答