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

hidden elements are not "computed" by processor, use another way to hide (opacity/resize/overlay perhaps) — PiLHA, Jul 13 '17 at 14:01
Possible duplicate of [Why isn't CSS visibility working?](https://stackoverflow.com/questions/4929310/why-isnt-css-visibility-working) — sol, Jul 13 '17 at 14:03
ahh I see, I didn't see that thread when I searched on StackOverFlow; thought it was a Jquery/Javascript issue. — Alex Ker, Jul 13 '17 at 14:04

score 2 · Accepted Answer · answered Jul 13 '17 at 13:58

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>

Does that make a difference? And my question was that is there a way to accomplish it using Jquery and Javascript — Alex Ker, Jul 13 '17 at 14:07
@AlexKer In fairness, you tagged your question `CSS` and said that it was an approach you tried and failed. Which property you use does make a difference, see this question --> https://stackoverflow.com/questions/272360/does-opacity0-have-exactly-the-same-effect-as-visibilityhidden — sol, Jul 13 '17 at 14:13
Could you see my updated question. I forgot to include one feature. — Alex Ker, Jul 13 '17 at 14:16

score 0 · Answer 2 · answered Jul 13 '17 at 14:10

0

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>

answered Jul 13 '17 at 14:10

prasanth

22,145
4
29
53

could you see my updated question. I edited my post. – Alex Ker Jul 13 '17 at 14:15

Button Visibility Toggle Not Functioning jQuery

2 Answers2