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

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

此代码...

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

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

边框出现在悬停上

1 个答案: