javascript - 使用从搜索图标弹出的搜索框创建 CSS 下拉菜单

标签 javascript html css

我正在创建一个 CSS 悬停下拉菜单。我有一个搜索图标,上面也有悬停。当您将鼠标悬停在该图标上时,它会下拉一个搜索输入。但是,当鼠标移出该区域时,搜索框就会消失。只要光标在输入字段内或输入处于焦点状态,就希望将框保持在那里。

如果您需要我发布我刚才告诉我的内容,但它基本上只是一个标准的纯 CSS 悬停下拉菜单,这是基本的 HTML 设置:

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

所以它有效,但正如我所说,当你离开时,即使光标闪烁,它也会再次隐藏。我假设我需要某种 JavaScript 来完成这项工作,但不确定从哪里开始。

最佳答案

您可以使用 JavaScript 向 li 添加和删除类。不过,下面的代码是在 jQuery 中。

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

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

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

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

关于javascript - 使用从搜索图标弹出的搜索框创建 CSS 下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11549813/

相关文章:

javascript - 为什么我在 javascript 中得到的是 [Text Object] 而不是预期的带有 previousSibling 的 TR 对象?

javascript - 标签标签包装复选框输入时如何删除复选框和样式标签

php - 如何在加载 pdf 文件之前显示加载图标?

javascript - Tic-Tac-Toe 自动播放无法按预期工作

asp.net - 用于设计 ASP.net Web 输入表单的 Div

jquery - CSS 绝对 DIV 导致其他绝对 DIV 问题

javascript - 如何将 mongo 文档与一系列规则一一匹配

javascript - 如何使用 jQuery 显示新内容

php - 如何在php中匹配两行mysql同一个表

html - CSS - 'Overflow' 的过渡?