0

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

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

但它没有奏效。链接在这里：http ://tdfts.c​​om/projects/akvile_test/

我也试过这个（对不起，我无法真正解释：D）：http ://tdfts.c​​om/projects/akvile_test/website/ 但这仍然无法正常工作，并且在 ie 和 ff 中看起来很糟糕。

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

先感谢您

4

4 回答 4

0

您可以像我为 facebook 叠加应用一样应用一些 css

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

顶部 -25px;

使用这个 #overlayfb:hover { top: -25px; }

我认为它会为你工作

于 2014-08-05T08:18:59.210 回答
0

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

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

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

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

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

于 2014-08-05T08:22:09.007 回答
0

演示..

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>

希望对你有帮助 ..

于 2014-08-05T08:23:48.383 回答
0

你有

#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在 an 上设置 a<img src="foo.png">只会显示background-imagebehind foo.png，我猜你想完全替换图像。

所以你有两个选择：

1) 更简单：使用 jQuery.hover()并使用 Javascript.attr("")更改src。<img>

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

于 2014-08-05T08:26:59.563 回答