文字未显示在悬停上

我目前正在创建一个使用图片的网站，当它悬停时显示一小段文字。这与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

文字未显示在悬停上

回答

相关问题