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

您可以为每个DSLContext.meta()元素添加透明边框。

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

＆＃13;

li

＆＃13;

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

＆＃13;

Answer 2

使用outline是一个简单的选择。

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

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

Answer 3

在子元素上设置与父元素的背景颜色匹配的默认边框（或透明），然后在悬停时更改边框颜色。

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

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

另一个解决方案是设置子元素的line-height和左padding并在悬停时减少它们，如下所示：

ul{
    list-style:none;
    padding:0;
    margin:0;
}
li{
    line-height:24px;
    padding:0 0 0 7px;
}
li:hover{
    border:2px solid;
    line-height:20px;
    padding:0 0 0 5px;
}

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

悬停边界时如何防止取代（移动）元素？

3 个答案: