How can I hide a button on hover? Seems simple but not working

Issue

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 :(.

Can someone please help? Thanks!

Solution

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>

Answered By – Quentin

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0