fishmong3r fishmong3r - 5 months ago 8
CSS Question

How to set CSS hover on input

I have this

input
button:

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


And this is the
CSS
:

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

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


So, as you can see on
hover
I want the button to have a border. It doesn't work. I have multiple buttons this is the reason for applying the settings for a whole
class
.

http://jsfiddle.net/su39u2td/

Answer

You have two mistakes

  1. Its :hover not :hoover
  2. Your selector for input should be 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">