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才能显示：

＆＃13;

.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');
}

＆＃13;

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

＆＃13;

Answer 2

#facebook-logo需要高度和宽度，因为里面没有任何内容。可以在其中放置一些文字，也可以使用CSS设置<a>的尺寸。

#facebook-logo {
    background:url('facebook-logo.png') no-repeat 0 0;
    width: 100px; /* Otherwise it will extend to the whole width of the page */
}

/*
  This is better because you need to `click` on something. If you just set
  the dimensions of #facebook-logo, you still wouldn't be able to click on the link.
 */
#facebook-logo  a {
    display: block;
    width: 100px;
    height: 100px;
}

确保两张图片都存在。

#facebook-logo {
  background: url('http://icons.iconarchive.com/icons/uiconstock/socialmedia/128/Facebook-icon.png') no-repeat 0 0;
  width: 128px;
}
#facebook-logo a {
  display: block;
  width: 128px;
  height: 128px;
}
#facebook-logo:hover {
  background: url('https://cdn3.iconfinder.com/data/icons/wpzoom-developer-icon-set/500/01-128.png') no-repeat 0 0;
}

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

Answer 3

你应该添加#facebook-logo div元素height和width然后背景图片显示

#facebook-logo{
    background:url('facebook-logo.png') no-repeat 0 0;
    height: 100px /*or whatever you need*/
    width: 100px /*or whatever you need*/
}

Answer 4

创建div的宽度和高度，然后只有你可以在它的背景上放置一些东西。

Answer 5

您的网站上有这些图片吗？（facebook-logo-negative.png和facebook-logo.png）

代码应该是这样的，如果是这样的话：

background：url（'img / facebook-logo.png'）no-repeat 0 0; （如果css文件与index.html位于同一页面上）

和

background：url（'../ img / facebook-logo.png'）no-repeat 0 0; （如果css文件位于另一个文件夹ex：css / style.css中）

同时给出该div的宽度和高度。

Answer 6

其他人已经给你答案了，但你可能想看看这个。

不要

以任何方式修改Facebook品牌资产，例如更改设计或颜色

来源：https://www.facebookbrand.com/dos-donts

悬停时使facebook图标反色

6 个答案: