我如何引用 html 元素相对于 CSS 中另一个元素位置的位置？

Question

假设我有 2 个 html 元素，位于 html 形式的不同部分：元素“第一元素”和元素“第二元素”。

“第一个元素”是一个弹性项目，它的位置随着页面大小的调整而变化（弹性换行）。当我将鼠标悬停在第一个元素上时，我想让“第二个元素”可见并将其放置在“第一个元素”下方 20 像素的位置。

我试过了：

#first-element:hover #second-element {
    display:block;
    position:absolute;
    left:#first-element.left;
    height:#first-element.top+20px;
}

这显然行不通:)

你能告诉我这样的事情是否可能吗？正确的语法是什么？或者，也许建议另一种方法？谢谢！

Answer 1

您需要 jQuery 或 Javascript 才能执行此操作。仅 CSS.

是不可能的

请在此处查看带有 jQuery

的示例

$(document).ready(function{

$('#first-element').hover(function(){
   $('#second-element').toggle(200);
})

})

在 css 中设置您想要的其他样式。

#second-element{
   position: absolute;
   top: 20px;
}

How can I reference a html element position in respect to another element's position in CSS?