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个元素，我想让第二个元素位置固定，而不管第一个元素的高度。在上面的小提琴中，高度在＆＃34; Hover＆＃34;然后我看到第二个元素抽搐。

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

有什么想法吗？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

无论顶部位置如何，都可以固定兄弟元素

1 个答案: