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

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

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

html

---

您可以使用

不透明度

#容器{
位置：相对位置；
}
#覆盖层{
宽度：100%；
身高：100%；
位置：绝对位置；
z指数：10；
}
#基地{
宽度：500px；
高度：500px；
左：400px；
}
.隐藏{
不透明度：0；
}
.隐藏：悬停{
不透明度：1；
}

---

您可以使用

不透明度

#容器{
位置：相对位置；
}
#覆盖层{
宽度：100%；
身高：100%；
位置：绝对位置；
z指数：10；
}
#基地{
宽度：500px；
高度：500px；
左：400px；
}
.隐藏{
不透明度：0；
}
.隐藏：悬停{
不透明度：1；
}

在您的问题中。
不可见
无法触发任何事件。请查看代码段。您可以使用
不透明度
或
宽度
和
高度
0。尝试单击，但没有可单击的元素

错误


a{
颜色：红色；
显示：无；
}
a:悬停{
颜色：绿色
}
assdsd
在您的问题中。
不可见
无法触发任何事件。请查看代码段。您可以使用
不透明度
或
宽度
和
高度
0。尝试单击，但没有可单击的元素

错误


a{
颜色：红色；
显示：无；
}
a:悬停{
颜色：绿色
}
assdsds
无法触发不可见元素上的事件您能进一步解释吗？隐藏元素不是由处理器“计算”的，请使用另一种方法隐藏（不透明度/调整大小/覆盖）可能重复的ahh我看到了，我在StackOverFlow上搜索时没有看到该线程；我认为这是Jquery/Javascript问题。无法在不可见元素上触发事件。您可以进一步解释吗？隐藏元素不是由处理器“计算”的，请使用另一种方法隐藏（不透明度/调整大小/覆盖）可能重复的ahh。我看到了，我在StackOverFlow上搜索时没有看到该线程；我以为这是Jquery/Javascript的问题。有没有办法用Jquery/Javascript做到这一点？@AlexKer使用
visibility
property？或者使用
不透明度
？这有区别吗？我的问题是，有没有一种方法可以使用Jquery和Javascript@AlexKer公平地说，你把你的问题标记为CSS，并说这是你尝试过的方法，但失败了。您使用的哪个属性会产生影响，请参见此问题-->您是否可以查看我更新的问题。我忘了包括一个功能。有没有办法用jQuery/javascript实现它？@AlexKer使用
visibility
property？或者使用
不透明度
？这有区别吗？我的问题是，有没有一种方法可以使用Jquery和Javascript@AlexKer公平地说，你把你的问题标记为CSS，并说这是你尝试过的方法，但失败了。您使用的哪个属性会产生影响，请参见此问题-->您是否可以查看我更新的问题。我忘了包括一个功能。你能看看我更新的问题吗。我编辑了我的帖子。你能看到我更新的问题吗。我编辑了我的帖子。
<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>

#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;
}