代码之家 › 专栏 › 技术社区 › clickbait

悬停时出现边框

bootstrap-4 hover twitter-bootstrap css html

clickbait · 技术社区 · 6 年前

我在卡片上有一个列表组。当您将鼠标悬停在最上面的列表组项上时,它下面会显示一个边框(不悬停时没有边框)。当我设定 :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>

1 回复 | 直到 6 年前

sol 6 年前

元素上有一个边框:

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

最初无法看到它,因为负边距使下一个元素向上移动(1px)并重叠它。

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

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

推荐文章

Damla Kara · 如何将悬停在React中的特定列表项作为目标?

2 年前

Facundo De Luca · 当鼠标不再停留在初始位置时,返回初始位置

2 年前

Yaswanth G · 如何在Selenium中验证鼠标悬停消息

6 年前

flash · 如何设置bootstrap 4元素的样式?

6 年前

dekzok · 悬停使元素相互重叠

6 年前

thaiten · CSS网格悬停为“shuffeling”

6 年前

adbleke · 悬停时DIV背景颜色更改

6 年前

Natalia · 如何从HTML中调用“hover”上的JS函数?

6 年前

lulZghost · css不透明度转换不工作

6 年前

AFG · 如何在鼠标悬停时播放视频?

6 年前