Question

有一个可单击的按钮，它隐藏在我正在做的项目的一部分中。当鼠标悬停在它上面时，它变为可见。我想单击隐藏的按钮。我尝试了网站上编写的大多数方法，但未成功。你有什么建议吗？

<div class="btn-group" style="visibility: hidden;">
  <a class="btn btn-xs" title="Add" onclick="AddAction()">
    <i clas="fa fa-plus-circle test-success"> == $0
      ::before
    </i>
  </a>
</div>

Answer 1

因此，尽管您使用的是visibility: hidden，但我还是建议您使用opacity。这仍然会像您期望的那样隐藏按钮。随时查看W3 Schools网站。它有很多很棒的资源，涵盖了像这样的简单事情。

我利用了该站点的以下参考文献：

function OnHover(element) {
      element.style.opacity = 100;
    }
    function OnExit(element) {
      element.style.opacity = 0;
    }
    function OnClick(element) {
      element.innerHTML = "You clicked me as a hidden button!";
      element.style.color = "red";
    }

.btn {
  visibility: hidden;
}
.btn:hover {
  visibility: visible !important;
}

<button id="btnO" onmouseover="OnHover(this)" onmouseout="OnExit(this)" onclick="OnClick(this)" style="opacity: 0;">Opacity</button>
<button id="btnV" onclick="OnClick(this)" class="btn">Visibility</button>

我相信，由于您的方案中visibility已设置为hidden，因此该页面不会触发连接到元素中的事件。甚至CSS selectors，例如hover似乎都受到此属性的影响。似乎并没有减小元素的大小，因为通过开发人员工具实时更改元素的visibility不会影响页面的布局。但是，opacity只是减少了元素上的Alpha通道，所有事件仍然照常触发。

更多高级Web开发人员；如果上述陈述有误，请随时纠正我。我找不到太多的文档。

提示：隐藏的元素占用页面上的空间。使用display属性可以隐藏和删除文档布局中的元素！

对于以上来自W3 Schools的报价，您可以创建一个包含按钮的空div元素。然后，当用户将鼠标悬停在div元素上时，显示按钮或从onclick事件调用javascript函数。在这种情况下，您可以使用visibility属性，因为您不会直接与按钮交互，而可以直接与div交互。

如何单击Atata框架的隐藏按钮？

1 个答案: