Как установить 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">

Answer 2

Пожалуйста, измените написание hoover к hover

.btn:hover 
{ 
    border: 1px solid black; 
} 

Answer 3

Вы должны исправить эти строки:

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

Answer 4

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

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

Answer 5

У вас есть несколько ошибок здесь.

• Первый опечатка :hover
• Второй ваш селектор.

У вас есть:

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

Это выбирает все парил поля ввода типа подавать внутри оболочки, которая имеет btn класс.

Понадобится:

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

, который выбирает все парил поле ввода типа представить имеющий класс btn.

Answer 6

Попробуйте это:

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