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
– PiLHA, Commented Jul 13, 2017 at 14:01
ahh I see, I didn't see that thread when I searched on StackOverFlow; thought it was a Jquery/Javascript issue. — Alex Ker
– Alex Ker, Commented Jul 13, 2017 at 14:04

sol · Accepted Answer · 2017-07-13 13:58:28Z

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>

answered Jul 13, 2017 at 13:58

sol

23k6 gold badges46 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Alex Ker Over a year ago

is there a way to do it with jQuery/javascript?

sol Over a year ago

@AlexKer using visibility property? or using opacity?

Alex Ker Over a year ago

Does that make a difference? And my question was that is there a way to accomplish it using Jquery and Javascript

sol Over a year ago

@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 --> stackoverflow.com/questions/272360/…

Alex Ker Over a year ago

Could you see my updated question. I forgot to include one feature.

prasanth · Accepted Answer · 2017-07-13 14:10:27Z

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, 2017 at 14:10

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

1 Comment

Alex Ker Over a year ago

could you see my updated question. I edited my post.

Collectives™ on Stack Overflow

Button Visibility Toggle Not Functioning jQuery

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related