当鼠标悬停在li元素上时，使第二行的li元素移动

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;
}
}

- user3785322

---

使用 outline 替代 border，因为 border 会增加元素的填充。(ul.tiles li:hover { outline: 1px solid black; }) - Praveen

它起作用了。这是正确的做法吗？ - user3785322

这要看情况。目前您没有将半径添加到边框上，也没有单独设置（例如：border-left、right等）。在您的情况下，outline已经足够了。 - Praveen

在这里，您可以找到很好的解释 https://dev59.com/zHM_5IYBdhLWcg3w8IHR - Praveen

好的，谢谢你的建议。我会去检查一下。 - user3785322

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>

- dashtinejad

Answer 2

你可以在 ul.tiles li 上使用 box-sizing: border-box; 属性。该属性用于告诉浏览器大小属性（宽度和高度）应包括哪些部分。是否应包括边框盒或仅包括内容盒，后者是宽度和高度属性的默认值。例如，如果您想要两个相邻的带边框的框，可以通过将 box-sizing 设置为 "border-box" 来实现。这会强制浏览器以指定的宽度和高度渲染框，并将边框和填充放置在框内部。http://jsfiddle.net/gm8zvfsk/

- user3909166

---

在这种情况下，文本会移动，这并不是非常理想的。 - dashtinejad

Answer 3

JS Fiddle。

正如Praveen所说，使用outline可以解决这个问题。

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

- charles