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是树方向的（层叠），所以不会为兄弟姐妹或父母提供。

使用position:relative/absolute

＆＃13;

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
}

＆＃13;

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

＆＃13;

Answer 2

你只能使用带有后面元素的CSS兄弟选择器 - 而不是在DOM之前或之后。

您可以添加一个父级，然后触发隐藏的元素，以便在您将父级悬停时显示。

.item:not(:nth-child(2)) {
    display: none;
}
.col:hover .item {
    display: block;
}

<div class="col">
  <div id='extendedFooter' class="item">
    It does not work :(
  </div>
  <div id='standardFooter' class="item">
    Hover me
  </div>
  <div id='test' class="item">
    Show me
  </div>
</div>

您可以使用flex column和order属性将要悬停的元素直观地放在列表的开头，但如果您之前有一个元素，则隐藏，当你将一个元素悬停在它之后触发它时，你会得到一个跳跃的结果......就像这样https://codepen.io/anon/pen/LyKPoB

解决这个问题的方法是，如果你将鼠标悬停在其中任何一个上，就可以显示隐藏的元素。

.item:not(.hover) {
    display: none;
}
.item:hover ~ .item, .item:hover {
    display: block;
}
.col {
  display: flex;
  flex-direction: column;
}
.item:nth-child(2) {
  order: -1;
}

<div class="col">
  <div id='standardFooter' class="item hover">
    Hover me
  </div>
  <div id='extendedFooter' class="item">
    It does not work :(
  </div>
  <div id='test' class="item">
    Show me
  </div>
</div>

悬停时显示在div上方

2 个答案: