How can I hide a button on hover?-CodePudding

I am trying to hide my .dwBtn class button on hover, using the code below, but it's not working.

.dwBtn {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: rgb(0, 180, 0);
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

.dwBtn:hover {
  display: none;
}

<button class="dwBtn">Test</button>

I've searched on Google and on StackOverflow but cannot find a solution. I have tried changing the opacity, like so:

opacity: 0;

But it still isn't doing anything as far as I can see. It looks as if there was a typo somewhere, but I can't find it.

CodePudding user response：

When the element isn't displayed, you can't hover it, so the rule stops applying, so it springs back immediately.

Using opacity as you suggested will work, it just didn't seem to because of typo you have since fixed.

.dwBtn {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: rgb(0, 180, 0);
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

.dwBtn:hover {
  opacity: 0;
}

<button class="dwBtn">Test</button>