Question

当我将鼠标悬停在链接上时，我正在尝试制作一些内容，只使用css - 你可以为我调查吗？我想我正走在正确的道路上只需要一些明确的方向，谢谢你的帮助！

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

我正在尝试重新创建这种类型的效果，如本教程中所示：

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

最小代码示例：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您有一个非常基本的问题，悬停动画只能影响锚标记内部或附近的元素。普通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>

css悬停显示单独的隐藏元素

1 个答案: