悬停时显示在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>

我已经设法使CSS工作时,显示的div是在悬停的div之后,但是当显示的div在悬停的div之前时它不起作用.

有没有办法只用CSS来实现这个目的？如果没有,是否有使用jQuery的解决方法？

Answer 1

如果你改变你的标记,你可以实现这一点,因为CSS是树方向的(级联),因此不会出现兄弟姐妹或父级.

并使用 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>