javascript - :active and :hover both active at the same time, padding stacks -


i've got issue 1 of designs @ moment, i'm creating hover button using :hover css element , ensuring stays same using :active element.

however, both :hover , :active have padding specified in respective css rules creates issue when click on button whilst still hovering on - padding stacks , button misplaced.

what can avoid this?

is mean (click div see hover/active).

html:

<div class="a">some content</div> 

css:

.a{     display:block;     padding:5px; } .a:hover{     padding:5px;     background:red; } .a:active{     padding:5px;     background:blue; } 

example: http://jsfiddle.net/justincook/jswcf/


Comments

Popular posts from this blog

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -

Trying to import CSV file to a SQL Server database using asp.net and c# - can't find what I'm missing -