javascript - 使用 javascript 显示/隐藏按钮

Question

我想通过使用下面的javascript在“.widget”中显示/隐藏类“.edit-one-button”的按钮。但是，当我第一次加载页面时，该按钮并未隐藏。知道可能出了什么问题吗？

<script type="text/javascript">
    $(function () {
      $('.edit-one-button').hide();  
      $('.widget').hover(function () {
        $(this).find('.edit-one-button').fadeIn(100);
      }, function () {
        $(this).find('.edit-one-button').fadeOut(100);
      });
    });
</script>

Answer 1

您还可以反转代码，因此.edit-one-button具有 display:none 的内联样式，然后在 css 中添加一个类似于.activeon hover的类display:block，而不是使用 javascript 在加载时隐藏。

.edit-one-button {
  display:none;
}



$(function () { 
  $('.widget').hover(function () {
    $('.widget .edit-one-button').fadeIn(100);
  }, function () {
    $('.widget .edit-one-button').fadeOut(100);
  });
});