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

看这把小提琴：

这是小提琴的代码

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

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

我不想在鼠标上方显示关闭按钮，只有当文本框是焦点时，关闭按钮才显示

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

在css中添加以下内容：

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

---

它将起作用。

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

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

---

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

您的意思是在“悬停”时隐藏它，在“聚焦”时显示它-像这样@CBroe，是的，让我试试我的code@CBroe，你可以添加答案，我会接受答案，你的答案对我很有帮助。这与半小时前发布的另一个答案完全相同…@BrianH。是的，如果你看这些评论，那就是我胡乱提出的解决方案。通常我不介意，但由于另一个答案似乎完全是对我建议的剽窃，我决定添加我自己的答案。。。