如何使以下元素在悬停时显示在元素上方

问题描述

如何使以下元素在悬停时显示在元素上方？ 我想要类似的东西

<div className="parent">
    <div className="hiddenElement"> Hey! </div>
    <div className="hoverElement"> Hover on me! </div>
</div>

但据我搜索，只有 .parent:hover > .hey和.hiddenElement:hover + .hoverElement。我也尝试过~，但没有用。我只是希望我的hiddenElement在设计上位于hoverElement之上。我尝试使用css边距，但是它也没有用，因为我的hoverElement是可扩展的输入，并且它的大小可以增加。我的hiddenElement也是绝对的。设计简单，顶部带有可悬停的div输入。

解决方法

不幸的是，CSS上没有以前的兄弟选择器，因此，如果您能够将标记稍微更改为：

<div class="parent">
    <div class="hoverElement"> Hover on me! </div>
    <div class="hiddenElement"> Hey! </div>    
</div>

这些CSS规则可以满足您的期望：

.parent {
  position: relative;
}

.hiddenElement {
  display: none;
  position: absolute;
}

.hoverElement {
  position: absolute;
}

.hoverElement:hover {
  display: none;
}

.hoverElement:hover ~ .hiddenElement {
  display: block;
}

.parent {
  position: relative;
}

.hiddenElement {
  display: none;
  position: absolute;
}

.hoverElement {
  position: absolute;
}

.hoverElement:hover {
  display: none;
}

.hoverElement:hover ~ .hiddenElement {
  display: block;
}

<div class="parent">
    <div class="hoverElement"> Hover on me! </div>
    <div class="hiddenElement"> Hey! </div>    
</div>