javascript - 无论顶部位置如何，都使兄弟元素固定

Question

这是我遇到问题的代码。

HTML

<a href="">abc</a>
<p>text</p>

CSS

a {
  height: 100px;
  width: 100px;
  display: inline-block;
  background: red;
}
a:hover {
  height: 90px;
}

我有 2 个元素，我想让第二个元素的位置固定，而不管第一个元素的高度如何。在上面的 fiddle 中，高度随“悬停”而变化，然后我看到第二个元素在抽搐。

在我的情况下，使用位置 Fixed 和 Absolute 不起作用。

有什么想法吗？

Answer 1

您可以对段落使用padding-top。该值是正常和悬停状态下的高度差。我使用了 + 兄弟选择器来选择下一个元素。

a {
  height: 100px;
  width: 100px;
  display: inline-block;
  background: red;
}
a:hover {
  height: 90px;
}
a:hover + p {
  padding-top: 10px; /* Value(Difference between heights) */
}

<a href="">abc</a>
<p>text</p>