Создание определенных элементов смены позиции при зависании

Question

Я не смог написать удовлетворительный заголовок, поэтому ему не нужно ничего делать с моей темой. Я хочу знать, как перемещать ссылки, когда я их перехожу, но не перемещая других. Я пытался поместить разные классы, но я не исправил проблему. Вот пример. Вкратце, когда я просматриваю первый твиттер, я не хочу, чтобы второй двигался.

Fiddle

a#twitter{ 
    display:block; 
    background:url(http://www.livefluid.com/img/twitter-sprite.png) no-repeat 0px 0px scroll; 
    width:72px; 
    height:28px; 
    display: inline-block; 
    vertical-align: middle; 
    margin-right:10px; 
    margin-top:0px; 
} 

a#twitter:hover{ 
    margin-top:20px; 
    background-position:0px -28px; 
} 

Answer 1

Посмотрите на this fiddle

Я изменил свои ссылки и CSS для использования классов вместо идентификаторов.

HTML

<a class="twitter" href='http://www.twitter.com'></a> 
<a class="twitter" href='http://www.twitter.com'></a> 

CSS

a.twitter { 
    display:inline-block; 
    background:url(http://www.livefluid.com/img/twitter-sprite.png) no-repeat 0px 0px scroll; 
    width:72px; 
    height:28px; 
    display: inline-block; 
    vertical-align: top; 
    margin-right:10px; 
    margin-top:0px; 
} 
a.twitter:hover { 
    margin-top: 20px; 
    background-position:0px -28px; 
}