只在悬停时显示一个按钮答案

【问题标题】：Only make a button appear on hover只在悬停时显示一个按钮
【发布时间】：2021-09-14 00:16:24
【问题描述】：

谁能帮我做一些非常简单但似乎在任何地方都找不到的东西。我现在正在使用 scss，我希望该按钮仅在悬停时显示。我现在把它隐藏了，这里是代码。我也在使用 svgs，我的按钮嵌套在一个块中。谢谢大家

&__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;
    }
  }

【问题讨论】：

标签： javascript html angular sass

【解决方案1】：

使用visibility: hidden 表示默认状态，使用visibility: visible 表示悬停状态。(https://developer.mozilla.org/en-US/docs/Web/CSS/visibility)

但是，您必须将按钮嵌套在另一个 div 中。隐藏元素时，悬停状态不起作用。 (Why isn't CSS visibility working?)

示例代码：

HTML

<div class="button-container">
    <button>
        Hover
    </button>
</div>

CSS

.button-container button {
    visibility: hidden;
    ...
}

.button-container:hover button {
    visibility: visible;
}

或在 SCSS 中

.button-container {
    button {
        visibility: hidden;
    }

    &:hover {
        button {
            visibility: visible;
        }
    }
}

【讨论】：

希望您能将其翻译成您的要求（SCSS 和 HTML）。
我保证这是正确的。我设置这个块的方式有很大不同。我已经嵌套了按钮。悬停状态通常有效。根本不起作用的状态是让它完全消失然后能够悬停它。老实说，我不知道我做错了什么。使用 svg 是一件额外的痛苦，因为我可以使用图像和链接来处理，只是无法使用与 svg 混合的布局来解决问题
你的方法也奏效了。但它破坏了功能。现在我正在使用下面的方式，但是当这实际上在一两周内部署时，它可能会改为这种方式。所以谢谢你！

【解决方案2】：

我认为最好直接使用不透明度。

注意：显然，它不可见，但仍会正常影响布局

   .button
    {
      opacity:0
    }
    .button:hover
    {
      opacity:1
    }

【讨论】：

是的，它起作用了，并且功能仍然可以正常工作。不确定当它实际部署时我是否会这样离开它，但现在它让我放心并且可以工作。非常感谢！