0

この URL を確認してください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;
}

マウスオーバーとマウスアウト機能を備えた2つの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 に答える