0

请检查此网址http://x2t.com/262032 您可以查看导航菜单右侧的 facebook 按钮如何工作。

此代码与此按钮一起使用。

CSS

div.social-wrapper {
    float: right; 
    text-align: right; 
    font-size: 15px;
    font-weight: bold; 
    margin: 11px 15px 0px 0px; 
}
div.social-wrapper-text { 
    margin-bottom: 10px; 
}
div.social-icon:first-child { 
    margin-left: 0px; 
}
div.social-icon { 
    float: left; 
    margin-left: 11px; 
    opacity: 0.55; 
    filter: alpha(opacity=55);
    cursor: pointer;
}

我需要两个具有鼠标悬停功能的 facebook 按钮的代码。将鼠标悬停在客人上会看到例如白色的 FB 按钮和鼠标悬停在黑色的按钮上。

这个怎么做？

4

2 回答 2

1 
<button class="class_of_button">    like us on facebook </button>
.class_of_button {
    background: url('source of fb image');
    }

    .class_of_button:hover {
    background: url('source of black fb image'); 
    }
于 2013-11-08T12:21:06.507 回答
0

这是我的个人解决方案：HTML：

<div class="social-icon">
<a href="CHANGE THIS LINK TO YOUR ONE">
        <img src="MOUSE_OFF.jpg"></img>
        <img src="MOUSE_ON.jpg"></img>
</a>
</div>

CSS：

<style type="text/css">
div.social-icon
{
    width: 600px; /* Width of IMG, TO BE CHANGED *
    height: 800px; /* Height of IMG, TO BE CHANGED *
}

div.social-icon img:nth-child(2)
{
    display: none;
}

div.social-icon img:first-child
{ 
    display: block;
}

div.social-icon:hover img:nth-child(2)
{ 
    display: block;
}

div.social-icon:hover img:first-child
{ 
    display: none;
}
</style>

只需将 CSS 放入您将放置按钮的 html 中即可。并且不要忘记更改 css 和 html 中提到的值。

是的：你必须自己创建图像，所以向自己展示一些绘画技巧~

于 2013-11-08T12:17:30.153 回答