зависающие эффекты только к его элементу

Question

+----------------------+ 
| +--------------+ | 
| +this is a link+ | 
| +--------------+ | 
+----------------------+ 

Как показано выше, я хотел бы сделать ссылку, но хочу дать зависающие эффекты только для моего «это ссылка», а не для разделителя (значения заполнения).

HTML

<a href="#">this is a link</a> 

CSS

a{display: block; width: 350px; padding: 10px; background: red; color: yellow;} 

Answer 1

Я хотел бы предложить вам есть DIV вокруг ссылки и дать отступ/запас для дел. Ссылка внутри была бы доступна, но div не будет. Это, вероятно, самое простое решение, если вы можете изменить HTML-код (и не ограничиваясь CSS)

HTML

<div class="awrapper"><a href="#">this is a link</a></div> 

CSS

.awrapper{display: block; width: 350px; padding: 10px;} 

Answer 2

Вы можете попробовать с border, без padding ,

a { 
    background: red; 
    display: block; 
    width: 350px; 
    color: yellow; 
    border: 10px solid red; 
} 

a:hover { 
    border: 10px solid white; 
} 

http://jsfiddle.net/y86sV/3/