如何在输入上设置 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/

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">