jquery - How to make changes in the element on mouse hover whenever element has focus? -

this code:

.metismenu li a:hover{ background:#112542;} .metismenu li a:focus{ background:inherit;} 

when have clicked on a it's background-color being inherited , hovering mouse again on it's background-color not being #112542 until not clicking anywhere outside a remove focus it. there solution can change it's background-color without clicking outside , hovering mouse again?

you can try :focus:hover state, in example : see fiddle

.metismenu li a:focus:hover{ background:yellow;} 

.metismenu li a:hover{ background:#112542;}  .metismenu li a:focus{ background:inherit;}  .metismenu li a:focus:hover{ background:yellow;}

<div class="metismenu">    <ul>      <li><a href="#!">link test</a></li>    </ul>  </div>