只在悬停时显示按钮

Question

Can anyone help me out with something really simple but can't seem to find anywhere. I am using scss right now and I want the button to only display when I hover it. I have it hidden right now and here is the code. I am also using svgs and my button is nested within a block. Thanks guys

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

Answer 1

Use visibility: hidden for default state and visibility: visible for hover state.( https://developer.mozilla.org/en-US/docs/Web/CSS/visibility )

However, you have to nest your button inside another div. Hover states don't work when an element is hidden. ( Why isn't CSS visibility working? )

Example code:

HTML

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

CSS

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

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

or in SCSS

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

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

Answer 2

I think it's better simply use opacity.

NOTE: Obviously, it's not visible but still affects layout as normal

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