javascript - 悬停时使Facebook图标变色

Question

我想制作一个简单的效果，可以在悬停时更改 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;
}

Answer 1

如果 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>