文字未顯示在懸停上

我目前正在創建一個使用圖片的網站，當它懸停時顯示一小段文字。這與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>

誰能告訴我在哪裏，我錯了？

謝謝

請注意：編碼不是我的強項。這裏可能有很多錯誤。

來源

2016-07-23 Whisetter46

只是用js做這個，我會在一分鐘內爲此做一個codepen。 –

標記中存在問題。爲了使用+#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>

來源

2016-07-23 11:41:32 Kan412

這裏我使用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，並增加了一些關鍵幀動畫。

來源

2016-07-23 12:02:22

文字未顯示在懸停上

回答

相關問題