html - 悬停时出现边框

Question

我在卡片中有一个列表组。当您将鼠标悬停在最顶部的列表组元素上时，它下方会出现一个边框(不悬停时没有边框)。当我在 Google Chrome 的开发工具中设置 :hover 覆盖时，边框没有出现。为什么会这样？

https://jsfiddle.net/williamqin123/0fkwsemn/

<div class="container">
  <div class="shadow-sm card my-5">
    <div class="list-group list-group-flush">
      <div class="text-center list-group-item">
        <h1 class="text-left d-inline-block mb-0">
          Submit
          <small class="text-muted">Create your ad in less than 1 minute</small>
        </h1>
      </div>
      <form action="/submit" method="POST" class="mb-0">
        <div class="form-group list-group-item">
          <label for="site">Site</label>
          <div class="input-group" id="site-menu">
            <select class="form-control text-center" name="site" id="site" required>
            </select>
            <div class="btn-group-toggle input-group-append" data-toggle="buttons">
              <label class="btn btn-outline-primary">
                <input type="checkbox" name="meta" value='checked'> Meta
              </label>
            </div>
          </div>
        </div>
        <div class="form-group list-group-item">
          <label for="post-id">Post ID</label>
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text" id="basic-addon1">#</span>
            </div>
            <input class="form-control text-center" type="number" min="1" step="1" name="id" id="post-id" required>
          </div>
        </div>
        <div class="form-group text-center list-group-item">
          <input class="btn btn-primary btn-lg" type="submit" value="Proceed">
        </div>
      </form>
    </div>
  </div>
</div>

Answer 1

元素上有边框:

.list-group-item {
    position: relative;
    margin-bottom: -1px;
    border: 1px solid rgba(0,0,0,.125);
 }

最初您看不到它，因为负边距会使下一个元素向上移动(1 像素)并与它重叠。

这段代码...

.list-group-item:hover {
  z-index: 1;
}

...添加一个新的堆叠上下文，使其出现在前面，并允许您看到边框。