html - 在鼠标悬停时隐藏搜索文本框关闭按钮

Question

看这个 fiddle :Click here for jsfiddle

这是 fiddle 的代码。

<input id="Search" name="Search" type="search" placeholder="Search" />

在文本框中输入一些单词并在文本框外单击后，关闭按钮消失，将鼠标悬停在文本框上，关闭按钮再次显示。

我不想在鼠标悬停时显示关闭按钮，只有当文本框获得焦点时才会显示关闭按钮。

任何人都可以帮我找到这个问题的解决方案。

Answer 1

可以在悬停状态下隐藏按钮，在焦点状态下显示:

#Search:hover::-webkit-search-cancel-button{
  display:none;
}
#Search:focus::-webkit-search-cancel-button{
  display:block;
}

(后者是必要的，因为悬停和焦点可以同时应用 - 所以如果您希望它在您悬停在已经聚焦的字段上时再次可见，您也需要后者规则。)