如何使用SCSS实现按钮仅在鼠标悬停时显示的效果

你需要给嵌套按钮的父块元素添加hover状态监听，触发按钮的显示逻辑就行，两种常用实现方案如下：

方案1：直接控制显示隐藏（无过渡效果） #

基于你现有的BEM嵌套写法调整即可，将以下代码里的.block替换为你实际的父块类名：

.block {
  // 父块原有样式正常写在这里
  &__button {
    display: none;
    cursor: pointer;
    border: none;
    outline: none;
    width: 32px;
    height: 32px;
    background: url("../../assets/Icons - Thin Delete.svg") center center no-repeat;
    &:hover {
      background: url("../../assets/Icons - Thin Delete On Hover.svg") center center no-repeat;
    }
  }

  // 父块hover时显示按钮
  &:hover &__button {
    display: inline-block;
  }
}

方案2：带淡入淡出过渡效果 #

如果需要更自然的显示/隐藏动画，不要用display属性（不支持过渡），改用opacity+visibility组合实现：

.block {
  // 父块原有样式正常写在这里
  &__button {
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease; // 过渡时长可自行调整
    cursor: pointer;
    border: none;
    outline: none;
    width: 32px;
    height: 32px;
    background: url("../../assets/Icons - Thin Delete.svg") center center no-repeat;
    &:hover {
      background: url("../../assets/Icons - Thin Delete On Hover.svg") center center no-repeat;
    }
  }

  &:hover &__button {
    opacity: 1;
    visibility: visible;
  }
}

补充说明：加visibility属性是为了避免按钮透明时依然占位、可被误触的问题。

内容的提问来源于stack exchange，提问作者Ethan Wayne