CODEWITHSUNDEEP
jquerycss
Rohit Sharma
Rohit Sharma

Reputation: 3334

How to use hover rule on focused element?

This is my code:

.metismenu li a:hover{ background:#112542;} /*would not affect when it has focus*/
.metismenu li a:focus{ background:inherit;}

When I have clicked on a it's background-color is changing to inherit and I am hovering mouse again on it, it's background-color is not changing to #112542 until I am not clicking anywhere outside a (Because it still has the focus and background-color: inherit;). Is there any solution that I can change it's background-color without clicking outside it and hovering mouse again?

Upvotes: 1

Views: 334

Answers (1)

Nutshell
Nutshell

Reputation: 8537

You can try with :focus:hover state, like in this example : See this 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>

Upvotes: 1

Related Questions