Html 带有覆盖的社交媒体图标

我刚刚为我的网站制作了社交媒体图标。我想让它们看起来更有趣一点，所以我在它们上面加上了覆盖物，当你将鼠标悬停在上面时就会出现。 我试着用

#bla:hover {
background-image: overlay.png;
} 

但它不起作用。链接此处：

我也尝试过这个抱歉我无法真正解释：D: 但这仍然不起作用，在ie和ff中看起来很糟糕

不要介意社交媒体吧的位置。 覆盖层应该有一个过渡

---

提前谢谢你

你可以像我为facebook overlay做的那样应用一些css

#overlayfb {
position: absolute;
height: 40px;
width: 40px;
z-index: 1;
background-image: url(img/socialmedia/fbhover.png);
top: -25px;
}

顶部为-25px

用这个 overlayfb：悬停{ 顶部：-25px； }

---

我认为它将根据您的上述风格对您有效，而不是您应该使用的

#bla:hover {
background-image: url('overlay.png');
} 

里面的url应该有正确的位置

关于位置，需要将包含overlay.png的div设置为绝对值。[位置：绝对；顶部：0；]

并确保父a应该是相对的或绝对的

CSS HTML 希望这对你有帮助。

你有

#fb {
    height: 40px;
    width: 40px;
    background-image: url(img/socialmedia/fbhover.png);
}

在style.css第72行中，这会导致自动应用背景图像。相反，您可能需要以下内容：

#fb {
    height: 40px;
    width: 40px;
}

#fb:hover {
    background-image: url(...);
}

然而，我怀疑这是你想要的。在上设置背景图像只会显示foo.png后面的背景图像，我猜您希望完全替换该图像

所以你有两个选择：

1更简单：使用jQuery的.hover和.attr使用Javascript更改的src

---

2更难/更丑但不需要JS：制作两个div，一个在另一个之上。使默认图像位于底部，悬停图像位于顶部。将顶部div的不透明度设置为0，然后执行CSS:hover选择器，将顶部div的不透明度更改为1。坦白地说，我会选择第一种

为什么不使用SVG呢？太多了easier@MujtabaFathel嗯，我以前从来没有用过这个：不用图像，你可以用很棒的字体图标。。它非常易于维护，并且具有可扩展性。现在使用给定的解决方案fb图标现在更大了，但上面仍然没有覆盖层这真的很酷。更新它：现在它只是必须inline@user3838625我已经更新了CSS中的.social项，将这三个项内联起来

#fb {
    height: 40px;
    width: 40px;
    background-image: url(img/socialmedia/fbhover.png);
}

#fb {
    height: 40px;
    width: 40px;
}

#fb:hover {
    background-image: url(...);
}