How do I remove a hover effect if the Element has focus?

Question

I am trying to add hover and focus effects to my input boxes.

On hover the box outline will be GREEN.

On focus the box outline will be BLUE.

Currently I hit a bump where if the input box has focus, it turns BLUE, but if I hover over it, it turns GREEN.

I want to prevent the box from initiating the 'hover' effect if the box has focus.

CSS:

input[type=text],
textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
input[type=text]:focus,
textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}
input[type=text]:hover,
textarea:hover {
  box-shadow: 0 0 5px rgba(46, 255, 138, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(46, 255, 138, 1);
}

How can I prevent the hover effect from executing while the input box has a focus?

Thanks!

Answer 1

The effects take precedence in the order you place them, so if you put them like this, it should work

input[type=text],
textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}

input[type=text]:hover,
textarea:hover {
  box-shadow: 0 0 5px rgba(46, 255, 138, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(46, 255, 138, 1);
}
input[type=text]:focus,
textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}