javascript - 为什么 CSS :hover 和 JS onclick 不起作用？

问题描述

我正在开发一个电子应用程序，我需要创建一个自定义标题栏。设计已经完成，理论上它可以工作（在 JS 中使用 element.click() 进行测试），但 CSS 中的 :hover 和 JS onclick 事件都不起作用。
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        html,
        body {
            margin: 0;
            height: 100%;
            overflow: hidden;
            background: #131313;
        }

        #titlebar {
            width: 100%;
            height: 16px;
            max-height: 16px;
            -webkit-user-select: none;
            -webkit-app-region: drag;
            font-family: sans-serif;
            font-weight: 600;
            color: white;
            padding: 10px 5px;
        }

        #titlebar-buttons {
            display: inline-block;
            position: absolute;
            right: 0px;
            top: 0px;
        }

        .titlebar-button {
            display: inline-block;
            height: 16px;
            width: 32px;
            text-align: center;
            padding: 8px;
            z-index: 1;
        }

        .titlebar-button:hover {
            background: #232323;
        }

        #webview {
            width: 100%;
            height: calc(100% - 32px);
        }
    </style>
    <script>
        const {
            remote
        } = require('electron')
        let mainWindow = remote.BrowserWindow.getFocusedWindow()
        let currentWindow
    </script>
</head>

<body>
    <div id="titlebar">
        <span id="titlebar-title"></span>
        <div id="titlebar-buttons">
            <span id="titlebar-minimize" class="titlebar-button" onclick="mainWindow.minimize();">_</span>
            <span id="titlebar-maximize" class="titlebar-button" onclick="mainWindow.isMaximized() ? mainWindow.unmaximize() : mainWindow.maximize()"><img width="10" height="10" id="maximize-icon"></span>
            <span id="titlebar-close" class="titlebar-button" onclick="mainWindow.close();">X</span>
        </div>
    </div>
    <webview id="webview" src="https://example.com/"></webview>
    <script>
        webview.addEventListener('dom-ready', () => {
            //webview.openDevTools()
            setInterval(function() {
                document.querySelector('#titlebar-title').innerText = webview.getTitle()
                document.querySelector('title').innerText = webview.getTitle()
                currentWindow = remote.BrowserWindow.getFocusedWindow()
                document.querySelector('#maximize-icon').src = mainWindow.isMaximized() ? "data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNNDcwLjg1NCw2NEg0NDhWNDEuMTQ2QzQ0OCwxOC40NTgsNDI5LjU0MiwwLDQwNi44NTQsMEg0MS4xNDZDMTguNDU4LDAsMCwxOC40NTgsMCw0MS4xNDZ2MzY1LjcwOCAgICBDMCw0MjkuNTQyLDE4LjQ1OCw0NDgsNDEuMTQ2LDQ0OEg2NHYyMi44NTRDNjQsNDkzLjU0Miw4Mi40NTgsNTEyLDEwNS4xNDYsNTEyaDM2NS43MDhDNDkzLjU0Miw1MTIsNTEyLDQ5My41NDIsNTEyLDQ3MC44NTQgICAgVjEwNS4xNDZDNTEyLDgyLjQ1OCw0OTMuNTQyLDY0LDQ3MC44NTQsNjR6IE0xMzguNjY3LDQyLjY2N2M1Ljg5MSwwLDEwLjY2Nyw0Ljc3NSwxMC42NjcsMTAuNjY3ICAgIGMwLDUuODkxLTQuNzc2LDEwLjY2Ny0xMC42NjcsMTAuNjY3UzEyOCw1OS4yMjQsMTI4LDUzLjMzM0MxMjgsNDcuNDQxLDEzMi43NzYsNDIuNjY3LDEzOC42NjcsNDIuNjY3eiBNOTYsNDIuNjY3ICAgIGM1Ljg5MSwwLDEwLjY2Nyw0Ljc3NSwxMC42NjcsMTAuNjY3QzEwNi42NjcsNTkuMjI0LDEwMS44OTEsNjQsOTYsNjRzLTEwLjY2Ny00Ljc3Ni0xMC42NjctMTAuNjY3ICAgIEM4NS4zMzMsNDcuNDQxLDkwLjEwOSw0Mi42NjcsOTYsNDIuNjY3eiBNNTMuMzMzLDQyLjY2N0M1OS4yMjQsNDIuNjY3LDY0LDQ3LjQ0MSw2NCw1My4zMzNDNjQsNTkuMjI0LDU5LjIyNCw2NCw1My4zMzMsNjQgICAgcy0xMC42NjctNC43NzYtMTAuNjY3LTEwLjY2N0M0Mi42NjcsNDcuNDQxLDQ3LjQ0Myw0Mi42NjcsNTMuMzMzLDQyLjY2N3ogTTQyLjY2Nyw0MDUuMzMzVjEwNi42NjdoMzYyLjY2N3YyOTguNjY3SDQyLjY2N3ogICAgIE00NjkuMzMzLDQ2OS4zMzNIMTA2LjY2N1Y0NDhoMzAwLjE4OEM0MjkuNTQyLDQ0OCw0NDgsNDI5LjU0Miw0NDgsNDA2Ljg1NFYxNzAuNjY3aDIxLjMzM1Y0NjkuMzMzeiIgZmlsbD0iI0ZGRkZGRiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=" : "data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ2OS4zMzMgNDY5LjMzMyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDY5LjMzMyA0NjkuMzMzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQyNi42NjcsMGgtMzg0QzE5LjE0NiwwLDAsMTkuMTM1LDAsNDIuNjY3djM4NGMwLDIzLjUzMSwxOS4xNDYsNDIuNjY3LDQyLjY2Nyw0Mi42NjdoMzg0ICAgIGMyMy41MjEsMCw0Mi42NjctMTkuMTM1LDQyLjY2Ny00Mi42Njd2LTM4NEM0NjkuMzMzLDE5LjEzNSw0NTAuMTg4LDAsNDI2LjY2NywweiBNMTM4LjY2Nyw0Mi42NjcgICAgYzUuODkxLDAsMTAuNjY3LDQuNzc1LDEwLjY2NywxMC42NjdjMCw1Ljg5MS00Ljc3NiwxMC42NjctMTAuNjY3LDEwLjY2N1MxMjgsNTkuMjI0LDEyOCw1My4zMzMgICAgQzEyOCw0Ny40NDEsMTMyLjc3Niw0Mi42NjcsMTM4LjY2Nyw0Mi42Njd6IE05Niw0Mi42NjdjNS44OTEsMCwxMC42NjcsNC43NzUsMTAuNjY3LDEwLjY2N0MxMDYuNjY3LDU5LjIyNCwxMDEuODkxLDY0LDk2LDY0ICAgIHMtMTAuNjY3LTQuNzc2LTEwLjY2Ny0xMC42NjdDODUuMzMzLDQ3LjQ0MSw5MC4xMDksNDIuNjY3LDk2LDQyLjY2N3ogTTUzLjMzMyw0Mi42NjdDNTkuMjI0LDQyLjY2Nyw2NCw0Ny40NDEsNjQsNTMuMzMzICAgIEM2NCw1OS4yMjQsNTkuMjI0LDY0LDUzLjMzMyw2NHMtMTAuNjY3LTQuNzc2LTEwLjY2Ny0xMC42NjdDNDIuNjY3LDQ3LjQ0MSw0Ny40NDMsNDIuNjY3LDUzLjMzMyw0Mi42Njd6IE00MjYuNjY3LDQyNi42NjdoLTM4NCAgICB2LTMyMGgzODRWNDI2LjY2N3oiIGZpbGw9IiNGRkZGRkYiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K"
            }, 0)
        })
    </script>
</body>

</html>
标签： javascripthtmlcsselectron
javascript - 为什么 CSS :hover 和 JS onclick 不起作用？

问题描述

解决方案

推荐阅读
