Текст, не отображающийся при зависании

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

Я использовал Jquery здесь вместо JS, потому что есть некоторые багги JS поведения при добавлении и удалении классов с простыми JS.

Ссылка на перо:

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

Я удалил некоторые из ваших CSS и добавлены некоторые ключевые кадры анимации.