javascript - 悬停时使Facebook图标变色

我想做一个简单的效果，可以改变Facebook图标图像时，悬停。但即时我的代码没有返回我想要的效果。当我将图像悬停时，它将不返回任何内容。这是我的密码。有人能教我怎么做吗？我接受HTML、CSS或jquery格式的答案。
HTML格式

<div class="loremipsum">
  <h3>Contact Us</h3>
  <p>We would love to here from you.So,just leave a email.</p>
  <div id="facebook-logo"><a href="http://facebook.com/joomgame"></a></div>
</div>

CSS

#facebook-logo{
    background:url('facebook-logo.png') no-repeat 0 0;
}

#facebook-logo:hover{
    background:url('facebook-logo-negative.png') no-repeat 0 -100px;
}

最佳答案

如果div中没有任何内容，则需要在其上设置width和height才能显示：

.picture {
  background-image: url('https://c2.staticflickr.com/4/3016/3071708735_ddaf5d361b.jpg');
  background-size: cover;
  height: 10em;
  width: 10em;
}

.picture:hover {
  background-image: url('http://wallpaperscraft.com/image/29330/256x256.jpg');
}

<div class="picture"></div>