JQueryの.toggle（ 'スライド'）にコンテンツが表示されない

Question

私はウェブサイトのソーシャルメディアのリンクを作成していますが、ユーザーがアイコンの上を移動すると、ソーシャルメディア/リンクアイコン。

$("#share").hover(function() { 
     $("#social-icon-content").toggle('slide'); 
     $("#share a").animate({opacity:'1'}, 1); 
     $("#share-button").animate({opacity:'1'}, 1); 
    }); 

グーグルクロームのコンソールで見て、それはそれは、コンテンツをスライドされる示していますが、それは何もスライドしない起こる終了した後、それがdisplay: none;からスイッチ： 私は、ユーザーに何が起こるかを制御し、このjQueryのコードはホバーしていますdisplay: block;。

詳細はこちらをご覧ください。JSFiddleへのリンクです。

Answer 1

あなたがする必要がある：

1. #share-buttonためfloat: leftプロパティを追加し、#social-icon-content
2. が.wsite-social.wsite-social-defaultためwidth: 230px; display: block;を設定
3. セット
4. ためプロパティがそれだ.wsite-social-item

ためdisplay: inline-block; float: left;プロパティを追加します！

Fiddle

Answer 2

リンクに何も配置されていないため、何も表示されません。

<a href="link">Text To be shown</a> 

テキストのB/Wリンクタグを入力していません。

あなたが任意のテキストなしで背景画像を表示したい場合は2つのオプションがあります。

1. スパン&に高さ&幅の追加は、表示ブロックを作ります。

   スパン{ display：block; 身長：50px; 幅：50px; }

2. 背景画像を持つスパンにパディングを追加します。

   スパン{ パディング：20px; }

あなたのコード内のいくつかの変更と作業例：Working