如何创建 CSS 悬停；在带有边框的 li 标签上，轻弹？ [复制]答案

【问题标题】：How to create a CSS hover; over the li tag with border, flicked? [duplicate]如何创建 CSS 悬停；在带有边框的 li 标签上，轻弹？ [复制]
【发布时间】：2018-07-24 13:26:01
【问题描述】：

我想给选中的li应用一个边框，但是好像悬停有闪烁的问题。尝试了 box-sizing 仍然无法解决它。

li {
  background: red;
}

li:hover {
  border: 1px solid blue;
  box-sizing: border-box;
}

我错过了什么吗？

https://jsfiddle.net/wf0r2c5q/1/

【问题讨论】：

欺骗stackoverflow.com/questions/8625812/…和stackoverflow.com/questions/9612758/…和stackoverflow.com/questions/5578606/…和stackoverflow.com/questions/556153/…

标签： html css

【解决方案1】：

最初将border-color 设置为transparent 并在:hover 状态设置border-color 为您的选择

堆栈片段

li {
  background: red;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

li:hover {
  border-color: blue;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

...或者另一种解决方案是使用box-shadow inset 而不是边框

li {
  background: red;
}

li:hover {
  box-shadow: 0px 1px 0 0px blue inset, 0px -1px 0 0px blue inset;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

【讨论】：

这很漂亮，第二个选项要好得多！谢谢！

【解决方案2】：

我假设您所说的“闪烁”是指当您将鼠标悬停在内部 <li> 上时项目符号点位置的轻微变化。这是因为当您添加边框时，它会将项目符号点移到页面下方。

您可以通过将 margin: -1px auto 添加到您的 :hover 状态来弥补这一点：

li {
  background: red;
}

li:hover {
  border: 1px solid blue;
  margin: -1px auto;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

希望这会有所帮助！

【讨论】：

如果你正确地看它，仍然会轻弹。我想要顶部和底部边框。

【解决方案3】：

将border: 1px solid transparent 添加到li 状态。

li {
  background: red;
  border: 1px solid transparent;
}

闪烁是因为边框改变了元素的布局。

【讨论】：

我想给选中的li加边框，设置这个就不能再加边框了。

【解决方案4】：

只需在li 标签上添加边框：1px solid red 或 1px solid transparent。您看到的闪烁是因为您将 0px 边框传递到 1px 边框

【讨论】：