CSS悬停无法按预期工作

Question

我想在悬停效果上显示我用span元素包裹的按钮组，最初会显示一个按钮，当用户将鼠标悬停在span元素上时，最初显示按钮将被隐藏，其他按钮将被显示。< / p>

.listbtn {
    opacity: 0;
    transition: opacity .35s ease;
}

.buttons:hover .listbtn {
    opacity: 1;
}

.settingsbtn {
    opacity: 1;
    transition: opacity .35s ease;
}

.buttons:hover .settingsbtn {
    opacity: 0;
}

.btn {
    padding: 6px 12px;
    display: inline-block;
    margin-top: -10px;
    text-transform: capitalize;
    margin-left: 6px;
    float: right;
}

.spaceTest {
    margin-left: 32px;
}

.listbtn {
    opacity: 0;
    transition: opacity .35s ease;
}

<span class="buttons">
     <button type="submit" class="btn btn-danger pull-right settingsbtn">
         <i class="material-icons">settings</i>
     </button>
     <a routerLink="/errors/{{message.id}}">
        <button type="submit" class="btn btn-danger pull-right listbtn">
            <i class="material-icons">content_paste</i>
        </button>
     </a>
     <button *ngIf="isScanning" type="submit" class="btn btn-danger pull-right spaceTest listbtn">
          <i class="material-icons">refresh</i>
      </button>
      <button type="submit" class="btn btn-danger pull-right listbtn">
          <i class="material-icons">delete</i>
      </button>
      <button type="submit" class="btn btn-danger pull-right listbtn">
          <i class="material-icons">mode_edit</i>
      </button>
</span>

我面临的问题是当用户在删除和重新扫描按钮之间移动鼠标时图标正在消失，这不应该是因为我正在使用css悬停在跨度上。你能否告诉我我做错了什么？

Answer 1

您遇到的问题是由添加到按钮元素的pull-right类引起的。这会导致按钮浮动到右侧，因此当将光标指向浮动按钮时，包装器span元素不会悬停在上面。

以下是我为展示您的问题而制作的CodePen：https://codepen.io/robertcooper_rc/pen/mqYGKN。我现在已经按照您的要求运行了这些功能，但如果您取消注释最后三行CSS，您将看到pull-right类如何影响按钮的悬停。

pull-right的样式是通过Bootstrap添加的。请参阅此处的Bootstrap快速浮动文档：https://getbootstrap.com/docs/3.3/css/#helper-classes-floats

解决方案 - Clearfix

解决此问题的一种方法是应用＆＃34; clearfix＆＃34;到span元素来处理它内部的所有浮动元素。以下是CSS中的clearfix：

// Clearfix
.buttons:after {
  content: "";
  display: table;
  clear: both;
}

clearfix强制span元素占据足够大的宽度和高度以包含浮动元素。如果没有clearfix，如果所有子元素都浮动，则span的高度将折叠为0，这就是阻止您将鼠标悬停在跨度上的原因。