如何解决如何使以下元素在悬停时显示在元素上方
如何使以下元素在悬停时显示在元素上方? 我想要类似的东西
<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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。