时间戳

首页 > 解决方案 > 如何相对于 CSS 中另一个元素的位置引用 html 元素位置？

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

问题描述

假设我有 2 个 html 元素，位于 html 表单的不同部分：元素“first-element”和元素“second-element”。

“第一个元素”是一个弹性项目，它的位置随页面大小调整（弹性包装）而变化。当我将第一个元素悬停时，我想让“第二个元素”可见并将其放置在从“第一个元素”向下 20px 的位置。

我试过了：

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

其中，显然没有工作:)

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

标签： cssreferenceposition

解决方案

You need jQuery or Javascript to do this. It is not possible with only CSS.

See an example here with jQuery

$(document).ready(function{

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

})

Style the rest of what you want in your css.

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

推荐阅读