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

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

我们可以使用HTML5 auto focus属性

例如:

<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 中工作