悬停后将光标放在输入字段中

Question

我有一个display:none的表单，当我要将鼠标悬停在另一个链接上时，表单会出现。如何将光标放入输入字段？有没有办法在css中做到这一点？

如果我直接将表单设为display:inline-block，则光标位于输入字段中。

我的CSS：

.search-bar {
    display: none;
 }

 #main-nav a:hover .search-bar {
     display: inline-block;
 }

html文件中的我的表单：

<input id="search_search" type="text" autofocus="autofocus" placeholder="Placeholder.Search.Main" name="search[search]"></input>

Answer 1

我认为您可能正在寻找一些客户端脚本（使用JQuery的Javascript或javascript）。

如果您不想通过客户端脚本完成此操作，并且只想支持html5，那么您应该查看html5的“autofocus”属性。请参阅this post的最佳答案。

Answer 2

我们可以使用HTML5 自动对焦属性

例如：

<input type="text" name="name" id="search_search" placeholder="Placeholder.Search.Main" name="search[search]" />

我们可以使用JQuery使用foxus()

执行此操作

使用Javascript：

$("#show").hover(function(){
    $("#search_search").show();
    $("#search_search").focus();
});

在Firefox中不起作用但在Safari中起作用