如何在悬停时隐藏按钮？ [关闭]

Question

我正在尝试使用下面的代码在悬停时隐藏我的 .dwBtn 类按钮，但它不起作用。

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

我在 Google 和 StackOverflow 上进行了搜索，但找不到解决方案。我试过改变不透明度，像这样：

opacity: 0;

但据我所知，它仍然没有做任何事情。好像哪里有错别字，但我找不到。

Answer 1

当元素未显示时，您无法将其悬停，因此规则停止应用，因此立即弹回。

按照您的建议使用不透明度会起作用，但由于您已经修复了错字，它似乎不起作用。

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