css - How to undo background-color on a:focus? -

twitter bootstrap has background-color properties set navigation items on :focus state, want undo declaration specific navigation element.

for example, in custom theme, let's when navigation item in default state, background color dark red. , when hover on it, changes light red.

then, because of bootstrap's declaration :focus state, if click navigation item, , move mouse away it, become light grey (from default bootsrap theme). want rid of.

what want achieve here that, when click item, should keep default behavior, meaning dark red without mouse over, , light red when mouse on it. doesn't work, because :focus state seems override :hover state, whatever try declare :focus, works both mouse on , mouse away.

i've tried background-color:transparent, , background-color:inherit. problem same, that, whatever color renders to, keep being regardless of mouse being on link or not. want background color keep changing on hover, when link gets focus.

in special element put class , set css.

.extraclass:focus{     color: #fff !important; }  .extraclass:hover{     color: #000 !important; }  .extraclass{     color:#555 !important; }