我正在创建一个 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/