Button Visibility Toggle Not Functioning jQuery

Question

I am trying to code a number of buttons that are invisible and only appears when you hover above them. When the mouse leaves where the button is, it should go back to being hidden. All the methods I tried--which I listed below--does not seem to work. First I tried to change the css property which fails, then the toggling of a class does not work either.

*EDIT, now could I allow user to click on a button once they hover above them, then the button will be selected and remain visible?

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

In your problem .invisible could't trigger any event .see the snippet.You could use opacity or width and height 0 .Try out the click but no element is there to click

Error

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

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

Answer 2

You could use opacity instead?

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