jquery - 悬停时显示在 div 上方

Question

我有两个 div，在页脚配置中。目的是在悬停时通过显示隐藏的 div 向上扩展页脚。

#extendedFooter,
#test {
    display: none;
}
#standardFooter:hover~#extendedFooter,
#standardFooter:hover~#test{
    display: block;
}

<div id='extendedFooter'>
    It does not work :(
</div>

<div id='standardFooter'>
        Hover me
</div>

<div id='test'>
    Show me
</div>

当要显示的 div 在悬停的 div 之后时，我设法使 CSS 工作，但是当要显示的 div 在悬停的 div 之前时它不起作用。

有什么方法可以仅使用 CSS 来实现吗？如果没有，是否有使用 jQuery 的解决方法？

Answer 1

如果您更改您的标记，您就可以实现这一点，因为 CSS 是树方向的(级联)，因此不会为 sibling 或父辈上升。

并使用position:relative/absolute

section {
  position: relative
}

#extendedFooter,
#test {
  display: none;
}

#standardFooter:hover~#extendedFooter,
#standardFooter:hover~#test {
  display: block;
}

#extendedFooter {
  position: absolute;
  top: 0
}
#standardFooter{
  position: absolute;
  top: 20px
}
#test{
  position: absolute;
  top: 40px
}

<section>
  <div id='standardFooter'>
    Hover me
  </div>
  <div id='extendedFooter'>
    It does not work :(
  </div>
  <div id='test'>
    Show me
  </div>
</section>