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

Question

看看这个小提琴：Click here for jsfiddle

以下是小提琴的代码。

<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;
}

（后者是必要的，因为悬停和焦点可以同时应用 - 因此，如果您希望在将鼠标悬停在已经聚焦的字段上时再次显示它，则还需要后一个规则。）

Answer 2

在你的css中添加：

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

它会起作用。