Question

我正在尝试将鼠标悬停在项目列表上时显示边框颜色。当我将鼠标移到第一行项目上时，第二行项目向右移动。请检查jsFiddle

<ul class="tiles">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

CSS

ul.tiles { width: 400px; }
ul.tiles li {
  float: left;
  list-style-type: none;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: white;
}
ul.tiles li:hover {
    border: 1px solid black;
}
}

Answer 1

为li添加透明边框：

li {
    border: 1px solid transparent;
}

ul.tiles { width: 400px; }
ul.tiles li {
  float: left;
  list-style-type: none;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: white;
}
ul.tiles li:hover {
    border: 1px solid black;
}

ul.tiles li {
    border: 1px solid transparent;
}

<ul class="tiles">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Answer 2

您可以box-sizing: border-box;上的ul.tiles li用户 http://jsfiddle.net/gm8zvfsk/

box-sizing属性用于告诉浏览器调整大小   属性（宽度和高度）应包括。

它们是否应包含边框或仅包含内容框   宽度和高度属性的默认值。

例如，如果你想要两个并排的边框，它可以   通过将框大小设置为“边框”来实现。这迫使了   浏览器渲染具有指定宽度和高度的框，以及   将边框和填充放在框内。

Answer 3

JS Fiddle

正如Praveen所说，使用大纲修复了这个问题。

ul.tiles li:hover {
    outline: 1px solid black;
}

悬停在li上，使第二排li移动

3 个答案: