HTML

Question

我刚为我的网站制作了社交媒体图标。我想让它们看起来更有趣，所以当你将鼠标悬停在它上面时，我会在它们上面叠加。我试过用

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

但它没有奏效。点击此处：http://tdfts.com/projects/akvile_test/

我也试过这个（抱歉我无法解释：D）：http://tdfts.com/projects/akvile_test/website/ 但是这仍然不能很好地工作，并且在ie和ff中看起来很糟糕。

不介意社交媒体栏的位置。叠加层应该有一个过渡。

提前谢谢

Answer 1

你可以像我为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; }

我认为它适合你

Answer 2

根据您的风格，而不是你应该使用

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

里面的网址应该有正确的位置。

关于位置，你需要使包含overlay.png的div应该是绝对的。 [位置：绝对;顶部：0;]

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

Answer 3

Demo ..

CSS

.social-item{
    width: 40px;
    height: 40px;
    position: relative;
    cursor: pointer;
    float: left;
    margin: 5px;
}
.social-item .original{
    width: 100%;
    height: 100%;
}
.social-item .over{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.social-item:hover .over{
    opacity: 1;
}

HTML

<div class="social-item">
    <img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/fb.png" class="original" />
    <img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/fbhover.png" class="over" />
</div>

<div class="social-item">
    <img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/twitter.png" class="original" />
    <img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/twitterhover.png" class="over" />
</div>

<div class="social-item">
    <img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/google.png" class="original" />
    <img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/googlehover.png" class="over" />
</div>

希望这会对你有帮助..

Answer 4

你有

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

你的style.css（第72行）中的

导致background-image自动应用。相反，你会想要这样的东西：

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

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

然而，我怀疑这是你想要的。在background-image上设置<img src="foo.png">只会在background-image后面显示foo.png，我猜你想要完全替换图像。

所以你有两个选择：

1）更简单：使用jQuery的.hover()和.attr("")使用Javascript更改src的{{1}}。

2）Harder / Uglier（但不需要JS）：制作两个div，一个在另一个之上。将默认图像放在底部，将鼠标悬停在顶部。将顶部div的不透明度设置为0，然后执行一个CSS <img>选择器，将顶部div的不透明度更改为1.坦率地说，我选择第一个选项。

社交媒体图标与覆盖

4 个答案:

CSS

HTML