Question

我想应用选定的边框，但似乎悬停有闪烁问题。试过的盒子大小仍然无法解决它。

li {
  background: red;
}

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

我错过了什么吗？

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

Answer 1

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

Stack Snippet

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>

Answer 2

只需在1px solid red标记上添加边框1px solid transparent或li即可。你看到的闪烁是因为你传递到0px边框到1px边框

Answer 3

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

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

它闪烁，因为边框会改变元素的布局。

Answer 4

我假设通过'闪烁'，当你将鼠标悬停在内部 <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>

希望这有帮助！

如何创建CSS悬停;在带有边框的li标签上，轻弹了？

4 个答案: