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 内联样式，然后在悬停时添加类似 .active 的类 display:block 在 css 中，而不是使用 javascript 在加载时隐藏。

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



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