Bootstrap 中的悬停效果

Question

我想在悬停时添加关闭按钮。所以我添加了以下代码 ->

.hide {
    display: none;
}

.to-hover:hover + .hide {
  display: block;
}

 <div class="to-hover">
    <li class="list-group-item d-flex justify-content-between lh-condensed">
      <div>
        <h6 class="my-0">Uploaded File</h6>
        <small class="text-muted">description.txt</small>
      </div>
      <span class="text-muted">3584 words</span>
      <div class="hide">
        <button type="button" class="close" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
     </li>
</div>

但是当我将鼠标悬停在它上面时，我没有看到关闭图标。

Answer 1

您不需要在此处放置 + 符号：.to-hover:hover + .hide.

.hide {
    display: none;
}

.to-hover:hover .hide {
  display: block;
}

<div class="to-hover">
    <li class="list-group-item d-flex justify-content-between lh-condensed">
      <div>
        <h6 class="my-0">Uploaded File</h6>
        <small class="text-muted">description.txt</small>
      </div>
      <span class="text-muted">3584 words</span>
      <div class="hide">
        <button type="button" class="close" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
     </li>
</div>

Bootstrap 中的悬停效果

Hovering Effect in Bootstrap

html

hover