javascript - addEventListener 用于在页面加载时隐藏的元素

Question

我的主页上有一个 FAB 按钮，单击该 FAB 按钮会显示另外三个按钮。当页面加载时，这三个按钮将被隐藏，我使用 CSS 选择器完成了它，

fab-main#fab-button + div{
  visibility: hidden;
}
fab-main#fab-button:hover + div{
  visibility: visible;
  animation: scale-in 0.5s;
}

我正在尝试为我的 HTML 中的 FAB 元素注册 addEventListener。请注意，我使用的是自定义元素

 class testSample extends HTMLElement {
        constructor() {
            super();
            this.addEventListener("click", () => {
                this.openPage();
            });
        }
}

window.onload = function () {
    window.customElements.define("fab-main", testSample);
}

HTML代码是

  <fab-main class='fab fas fa-comment-dots' id="fab-button"></fab-main>

    <div class="home-expand">
        <div class="home-expand-item">
            <fab-main class='fab fas fa-comment-dots'></fab-main>
        </div>
        <div class="home-expand-item">
            <fab-main class='fab fas fa-comment-dots'></fab-main>
        </div>
        <div class="home-expand-item">
            <fab-main class='fab fas fa-comment-dots'></fab-main>
        </div>
    </div>

我的问题：

单击事件不适用于最初设置为隐藏的 FAB 按钮。我能够获取可见按钮的单击事件，但其他三个按钮不可见。

注意：我正在尝试在 window.onload 中注册侦听器。

标签： javascriptcssfont-awesomevisibilityaddeventlistener