按钮可见性切换不起作用 jQuery

Question

我正在尝试编写一些不可见的按钮，只有在您将鼠标悬停在它们上方时才会出现。当鼠标离开按钮所在的位置时，它应该回到隐藏状态。我尝试过的所有方法——我在下面列出的——似乎都不起作用。首先，我尝试更改失败的 css 属性，然后切换类也不起作用。

*EDIT，现在我可以允许用户在将鼠标悬停在其上方时单击按钮，然后该按钮将被选中并保持可见？

html

<div id="container">
      <div id="overlay">
        <form action="">
          <input type="button" name="b" id="w1" class="data hidden"/>
          <input type="button" name="b" id="w2" class="data hidden"/>
          <input type="button" name="b" id="w3" class="data hidden"/>
          <input type="button" name="b" id="w4" class="data hidden"/>
          <input type="button" name="b" id="b1" class="data hidden"/>
          <input type="button" name="b" id="b2" class="data hidden"/>
          <input type="button" name="b" id="b3" class="data hidden"/>
          <input type="button" name="b" id="b4" class="data hidden"/>
          <input type="button" name="b" id="r1" class="data hidden"/>
          <input type="button" name="b" id="r2" class="data hidden"/>
          <input type="button" name="b" id="r3" class="data hidden"/>
          <input type="button" name="b" id="r4" class="data hidden"/>
          <input type="button" name="b" id="g1" class="data hidden"/>
          <input type="button" name="b" id="g2" class="data hidden"/>
          <input type="button" name="b" id="g3" class="data hidden"/>
          <input type="button" name="b" id="g4" class="data hidden"/>
          <input type="button" id="continue" value="continue" class="control"/>
          <input type="button" id="replay" value="replay" class="control"/>
        </form>
      </div>
      <div id="base">
        <img id="myImage">
      </div>
    </div>

css

#container {
  position: relative;
}
#overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 10;
}
#base {
  width: 500px;
  height: 500px;
  left: 400px;
}  
.data {

}
.hidden {
  opacity: 0;
}
.hidden:hover {
  opacity: 1;
}

Answer 1

在您的问题中 .invisible 无法触发任何事件。请参阅 sn-p。您可以使用 opacity 或 width 和 height 0 。尝试单击但没有元素可以单击

错误

a{
color:red;
display:none;
}
a:hover{
color:green
}

<a class="p" onclick="console.log('ssx')">assdsds</a>

Answer 2

您可以改用opacity 吗？

#container {
  position: relative;
}

#overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 10;
}

#base {
  width: 500px;
  height: 500px;
  left: 400px;
}

.hidden {
  opacity: 0;
}

.hidden:hover {
  opacity: 1;
}

<div id="container">
  <div id="overlay">
    <form action="">
      <input type="button" name="b" id="w1" class="data hidden" />
      <input type="button" name="b" id="w2" class="data hidden" />
      <input type="button" name="b" id="w3" class="data hidden" />
      <input type="button" name="b" id="w4" class="data hidden" />
      <input type="button" name="b" id="b1" class="data hidden" />
      <input type="button" name="b" id="b2" class="data hidden" />
      <input type="button" name="b" id="b3" class="data hidden" />
      <input type="button" name="b" id="b4" class="data hidden" />
      <input type="button" name="b" id="r1" class="data hidden" />
      <input type="button" name="b" id="r2" class="data hidden" />
      <input type="button" name="b" id="r3" class="data hidden" />
      <input type="button" name="b" id="r4" class="data hidden" />
      <input type="button" name="b" id="g1" class="data hidden" />
      <input type="button" name="b" id="g2" class="data hidden" />
      <input type="button" name="b" id="g3" class="data hidden" />
      <input type="button" name="b" id="g4" class="data hidden" />
      <input type="button" id="continue" value="continue" class="control" />
      <input type="button" id="replay" value="replay" class="control" />
    </form>
  </div>
  <div id="base">
    <img id="myImage">
  </div>
</div>