ボタンの可視性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

代わり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>

Answer 2

。 invisibleは、クリックからopacityまたはwidthとheight 0 .Tryを使用することができますsnippet.You .see任意のイベントをトリガーcould'tが、どの要素がクリックすることはありません

エラー

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

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