Wiadomo, że link po najechaniu potrafi sie podkreślić, lub przeciwnie podkreślenie może zniknąć i pojawić się nad, albo podświetlić czyli zmienić kolor
Ale rozumie dotąd wszystko proste. Chciałem jednak wykorzystać inny efekt i zastanowić się jak zrobić by link po najechaniu myszką obrysował sie prostokątem, taką obwódką. W zasadzie załatwia broblem gdy da się w stylach CSS:
a:hover {border:1px solid orange;}Problem jednak w tym, że gdy pojawia się BORDER to element robi się większy i rozpycha się przesuwjąc następne elementy. Najbardziej po chamsku, be3dzie dodać BORDER w kolorze tła, który będzie, ale nie widoczny już przed najechaniem myszki. I dla elegancji dodałem PADDING by obwódka nie stykała się z literami.
a {border:1px solid #ddd; padding:1px 4px;}
a:hover {border:1px solid orange;}O to chodzi, ale jeszcze test czy da sie jeszcze inaczej?
Pozbywam sie tego BORDER w kolorze tła, a w zamian daje by link wyświetlał sie jako BLOCK i nadaje mu wymiary szrokości i długości. By uniknąć rozpychania daję dla stanu po najechaniu myszką HOVER wymiar mniejszy o 2x grubość pomarańczowej obwódki. To zasadnicza zmiana, dodałem jeszcze wyrównanie tekstucentralne i dla stanu po najechaniu myszką MARGIN minus grubość obwódki oraz FLOAT by BLOCK-i układały się obok siebie a nie jeden pod drugim.
#typ06 a { display: block; width: 46px; height: 20px; float:left; text-align: center; }
#typ06 a:hover {width: 44px; height: 18px; border:1px solid orange; margin:-1 auto auto auto;}
I jeszcze dla zabawy taki pseudo wciśniety klawiszek.
a { display: block; width: 46px; height: 20px; float:left; text-align: center; }
a:hover {width: 44px; height: 18px; border-top:1px solid #000; border-bottom:1px solid #e8e8e8;
border-left:1px solid #666; border-right:1px solid #666; background-color: #c9c9c9;}