悬停时出现边框答案

【问题标题】：Border appears on hover悬停时出现边框
【发布时间】：2019-01-19 04:28:21
【问题描述】：

我在卡片中有一个列表组。当您将鼠标悬停在最顶部的列表组项目上时，其下方会出现一个边框（不悬停时没有边框）。当我在 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>

【问题讨论】：

标签： html css twitter-bootstrap hover bootstrap-4

【解决方案1】：

元素上有边框：

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

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

这段代码...

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

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

【讨论】：