Question

请检查此网址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按钮和黑色鼠标上的鼠标。

怎么做？

Answer 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'); 
    }

Answer 2

这是我个人的解决方案： 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中提到的值。

是的：你必须自己创建图像，所以给自己展示一些Paint skillz~

鼠标悬停功能的按钮

2 个答案: