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

你有两个错误

其:hover而非:hoover
您输入的选择器应为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">

Answer 2

你需要修改这一行：

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

Answer 3

这里有几个错误。

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

你有：

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

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

你需要：

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

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

Answer 4

请将LED = 0的拼写更改为hoover

hover

Answer 5

＆＃13;

.btn
{
    cursor:pointer;
    border: none;
    background: none;
    width: 20px;
    height: 20px;
}
.btn#query:hover
{
    border: 1px solid black;
}

＆＃13;

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

＆＃13;

Answer 6

试试这个：

input:hover
{
    border: 1px solid black;
}

如何在输入上设置CSS悬停

6 个答案: