悬停时使Facebook图标变色

Question

我想制作一个简单的效果，可以在 hover.But 即时我的代码没有 return 我想要的效果时更改 Facebook 图标图像。当我将鼠标悬停在图像上时，它 return 什么都没有。这是我的代码。谁能教我怎么做？我接受 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

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

你应该添加 #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 3

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

Answer 4

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

Answer 5

你的网站上有那些图片吗？ (facebook-logo-negative.png and facebook-logo.png)

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

背景：url('img/facebook-logo.png') 不重复 0 0; （如果 css 文件与 index.html 在同一页上）

和

背景:url('../img/facebook-logo.png') 不重复0 0; （如果 css 文件在另一个文件夹中，例如：css/style.css）

同时给那个div一个宽度和高度。

Answer 6

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

不要

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

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

悬停时使Facebook图标变色

Make facebook icon reverse color when hover

html

javascript

css

jquery