title: When input has :focus, dont trigger :hover styles
body: <p>I got a input which I styled with a <code>:focus</code> and <code>:hover</code>.
  When the input has <code>:focus</code>, I don't want to have the <code>:hover</code> style triggered when I hover over the input. </p>
  
  <p>How am I supposed to style that?</p>
  
  <p>My css is as follow:</p>
  
  <pre><code>.form-control:hover {
     border-color: #a9a9a9;
  }
  
  .form-control:focus {
     box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 2px rgba(102,175,233,.6);
     -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 2px rgba(102,175,233,.6);
  }
  </code></pre>