Question

我目前正致力于创建一个使用图片的网站，这些图片在悬停时会显示一小段文字。这与nowthisnews.com网站上的内容类似。

但是，我无法让它正常工作。

以下是我到目前为止的摘要：

＆＃13;

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

＆＃13;

<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>

＆＃13;

谁能告诉我哪里出错了？

由于

请注意：编码不是我的强项。这里可能有很多错误。

Answer 1

标记中存在问题。要使用+ #facebook-menu，应该是#facebook的兄弟姐妹。我清理了标记。

以下代码应该可以使用

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

在这里，我使用Jquery做了一个更顺畅的实现，人们会说悬停功能不需要jWuery，但是，使用JS来实现它可以提供更好的跨浏览器一致性和更多选项。

Julia Client: Work in ...

我在这里使用的是Jquery而不是JS，因为在使用普通js添加和删除类时会出现一些错误的js行为。

链接到笔：

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

我删除了一些你的css并添加了一些关键帧动画。

悬停时未显示的文字

2 个答案: