テキストがホバー上に表示されない

Question

私は現在、ホバーオーバーして短いテキスト行を表示する画像を使用するウェブサイトを作成しています。これはnowthisnews.comウェブサイトで行われているのと同様です。

しかし、これを正しく動作させることはできません。

#facebook-menu { 
 
    display: none; 
 
    } 
 
    
 
    #facebook { 
 
    cursor: pointer; 
 
    } 
 
    
 
    #facebook:hover + #facebook-menu { 
 
    display: block; 
 
    }

<footer> 
 
    <div id="footer"></div> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-lg-10 col-lg-offset-1 text-center"> 
 
     <br> 
 
     <ul class="list-inline"> 
 
      <div class="hover"> 
 
      <img href="" id="facebook" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-128.png" height="39px" width="39px"></div> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div id="facebook-menu"> 
 
    <font size=5><b>Geeky Pixel</b> 
 
       <br><font size=2> 
 
       Get all news and updates directly to your Facebook feed.<font size=5>

は、誰も私が間違っているつもりですどこを教えてもらえます：ここで

は、私がこれまで持っているものの抜粋ですか？

ありがとうございました

注：コーディングは私の強みではありません。ここにはおそらく多くのエラーがあります。

Answer 1

マークアップに問題がありました。 +#facebook-menuを使用するには、#facebookの兄弟である必要があります。私はマークアップをきれいにした。コードの下

ここ

#facebook-menu { 
 
    display: none; 
 
    } 
 
    
 
    #facebook { 
 
    cursor: pointer; 
 
    } 
 
    
 
    #facebook:hover + #facebook-menu { 
 
    display: block; 
 
    }

<footer> 
 
    <div id="footer"></div> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-lg-10 col-lg-offset-1 text-center"> 
 
     
 
      <img href="" id="facebook" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-128.png" height="39px" width="39px"> 
 

 
      <div id="facebook-menu"> 
 
       <b>Geeky Pixel</b> 
 
       <p>Get all news and updates directly to your Facebook feed.</p> 
 
      </div> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</footer> 
 

Answer 2

を動作するはずです、私はjqueryのを使用してよりスムーズな実装を行っている、人々はでそれをやって、しかし、jWueryは、ホバー機能のために必要とされていないと言うだろうJSはより良いクロスブラウザの一貫性とはるかに多くのオプションを提供します。

$('#facebook').mouseenter(function() 
{$('#facebook-menu').removeClass('puffOut').addClass('puffIn magictime');}); 

$('#facebook-menu').mouseleave(function() 
{$('#facebook- menu').removeClass('puffIn').addClass('puffOut');}); 

無地のjsを持つクラスを追加および削除するときに、いくつかのバグがjsの振る舞いがあるので、私は、代わりにJSのここでのjQueryを使用していました。ペンに

リンク：

http://codepen.io/damianocel/pen/YWaWJE

私はあなたのCSSの一部を削除し、いくつかのキーフレームアニメーションを追加しました。