html - 悬停有边框时如何防止替换(移动)元素？

Question

我有一个这样的 HTML 结构:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li:hover {
  border: 2px solid;
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

如你所见，当:hover运行，<li>的位置变化。如何保持不变(修复)？

注意:我可以使用 box-shadow 来做到这一点，但我不想。因为我网站的大多数访问者都使用旧浏览器。那么，有没有其他解决方案？

Answer 1

您可以为每个 li 元素添加透明边框。

这将取代悬停时添加的边框。

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  border: 2px solid transparent;
}
li:hover {
  border: 2px solid;
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>