html - css hover 显示单独的隐藏元素

Question

我试图在将鼠标悬停在链接上时显示一些内容，仅使用 CSS - 你能帮我看看这个吗？我认为我在正确的道路上，只需要一些明确的方向，谢谢您的帮助!

https://jsfiddle.net/JOSBORNE_/achmfszv/#&togetherjs=0o94SRwPsi

我正在尝试重新创建本教程中看到的这种类型的效果:

http://line25.com/tutorials/how-to-create-a-trendy-flat-style-nav-menu-in-css

最小代码示例:

#Link1 {
  position: absolute;
  text-align: center;
  margin: -440px 0 0 9%;
  width: 80%;
  display: none;
}

.Link1:hover #Link1 {
  display: block;
}

<div class="menuforspecials">

  <li class="Link1"><a href="">Link 1</a></li>
  <li><a href="">Link 2</a></li>
  <li><a href="">Link 3</a></li>
  <li><a href="">Link 4</a></li>

</div>

<li class="current" id="Link1">
  <h2>Offer Heading 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique in lacus ut vulputate. Nullam rhoncus, dolor quis euismod.</p>
</li>
<li id="Link2">
  <h2>Offer Heading 2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique in lacus ut vulputate. Nullam rhoncus, dolor quis euismod.</p>
</li>

Answer 1

你有一个非常基本的问题，悬停动画只能影响 anchor 标签内或附近的元素。纯 css 不允许您将鼠标悬停在链接上并影响页面下方的元素(如果它不满足上述邻近度要求)。

这是一个可以做什么的基本示例。

.content{
  display: none;
}

.menuforspecials a:hover + .content {
  display: block;
}

<div class="menuforspecials">

  <li class="Link1"><a href="">Link 1</a>
    <div id="Link1" class="content">
      <h2>Offer Heading 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique in lacus ut vulputate. Nullam rhoncus, dolor quis euismod.</p>
    </div>
  </li>
  <li><a href="">Link 2</a>
    <div id="Link2" class="content">
      <h2>Offer Heading 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique in lacus ut vulputate. Nullam rhoncus, dolor quis euismod.</p>
    </div>
  </li>
  <li><a href="">Link 3</a></li>
  <li><a href="">Link 4</a></li>

</div>