如何在输入上设置 CSS 悬停

Question

我有这个 input 按钮：

 <input class="btn" type="submit" id="query" name="query" value="Q" title="Query">

这是 CSS ：

 .btn {
    cursor:pointer;
    border: none;
    background: none;
    width: 20px;
    height: 20px;
}

input.btn[type="submit"]:hover {
    border: 1px solid black;
}

所以，正如您在 hover 上看到的那样，我希望按钮具有边框。它不起作用。我有多个按钮，这就是为整个 class 应用设置的原因。

http://jsfiddle.net/su39u2td/

原文由 fishmong3r 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你有两个错误

1. 它的 :hover 不是 :hoover
2. 您的输入选择器应该是 input[type="submit"].btn:hover

 .btn {
  cursor: pointer;
  border: none;
  background: none;
  width: 20px;
  height: 20px;
}
input[type="submit"].btn:hover {
  border: 1px solid black;
}

 <input class="btn" type="submit" id="query" name="query" value="Q" title="Query">

原文由 Nenad Vracar 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你在这里有几个错误。

• 第一个是你拼错 :hover
• 第二个是您的选择器。

你有：

 .btn input[type="submit"]:hover

这将选择在具有 btn 类的包装器内提交类型的所有悬停输入字段。

你需要：

 input[type="submit"].btn:hover

选择具有类 btn 的提交类型的所有悬停输入字段。

原文由 Jordi Nebot 发布，翻译遵循 CC BY-SA 3.0 许可协议