Question

我正在尝试编写一些不可见的按钮，仅在您将鼠标悬停在上方时才会显示。当鼠标离开按钮所在的位置时，它应该返回隐藏状态。我尝试的所有方法 - 我在下面列出 - 似乎都不起作用。首先，我尝试更改失败的css属性，然后切换类也不起作用。

*编辑，现在我可以让用户点击按钮上方的按钮，然后按钮将选中并保持可见？

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。尝试点击但是没有要点击的元素

错误

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

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

按钮可见性切换不运行jQuery

2 个答案: