电子：自定义标题栏：当光标离开应用程序时，按钮不会将其 CSS 属性更改回正常（鼠标悬停后）

Question

您好！这是我今天第二次发帖，但人们就是这样学习的，对吧？反正！我正在使用 Electron 创建一个应用程序，我想创建一个自定义标题栏。我已经成功了，但有一个小细节让我很困扰。我希望按钮在鼠标悬停时改变它们的不透明度，但是当鼠标悬停在按钮上后光标离开应用程序时，它们不会改变。相反，我必须再次转到应用程序，再次将鼠标悬停在按钮上，最后才能看到正确的行为。有没有办法来解决这个问题？这不是致命的，但我正在尽我所能使我的应用程序看起来美观且令人愉悦！

HTML:

<div class="titlebar">
    <div class="dragzone"></div>
    <h1>Dashboard - Wealm</h1>
    <button id="closeApp">x</button>
    <button id="minApp">-</button>
</div>

CSS:

.titlebar {
    position: absolute;
    top: 0;
    width: 100%;
    height: 29px;
    overflow: hidden;
    z-index: 50;
    background: rgba(255, 255, 255, 0.8);
}

.titlebar .dragzone {
    -webkit-app-region: drag;
    overflow: hidden;
    position: absolute;
    left: 0;
    width: 990px;
    height: 29px;
}

.titlebar h1 {
    float: left;
    opacity: 0.85;
    margin: 4px 0 0 43.5%;
    font-family: Jost-400-Book;
    font-size: 12pt;
}

.titlebar #closeApp {
    font-weight: bold;
    opacity: 0.55;
    float: right;
    background: none;
    border: none;
    outline: none;
    font-family: Eight One;
    font-size: 18pt;
    margin-top: 2px;
}

.titlebar #minApp {
    font-weight: bold;
    opacity: 0.55;
    float: right;
    background: none;
    border: none;
    outline: none;
    font-family: Eight One;
    font-size: 18pt;
    margin-top: 2px;
}

.titlebar #closeApp:hover {
    opacity: 1;
}

.titlebar #minApp:hover {
    opacity: 1;
}

Answer 1

好消息！我确实找到了解决方案！我做了什么 - 首先，我用段落替换了按钮内的内容。它是相同的文本，但在段落标记中。我将按钮的 overflow 属性设置为 visible，以便能够将按钮的高度设置为 0 而不会隐藏段落本身。然后我只是玩边距。由你决定！

.titlebar #closeApp {
    font-weight: bold;
    background: none;
    float: right;
    opacity: 0.55;
    border: none;
    outline: none;
    font-family: Eight One;
    font-size: 18pt;
    overflow: hidden;
    padding-right: 0px;
    margin-right: 8px;
    margin-top: 8px;
}

.titlebar #closeApp p {
    margin-bottom: 0;
    margin-top: -5.45px;
}

.titlebar #minApp {
    font-weight: bold;
    background: none;
    float: right;
    opacity: 0.55;
    border: none;
    outline: none;
    font-family: Eight One;
    font-size: 18pt;
    overflow: hidden;
    margin-top: 8px
}

.titlebar #minApp p {
    margin-bottom: 0;
    margin-top: -5.45px;
}

祝你有美好的一天！如果您有问题或解决方案不适合您，请告诉我！

电子：自定义标题栏：当光标离开应用程序时，按钮不会将其 CSS 属性更改回正常（鼠标悬停后）

Electron: Custom Titlebar: Buttons don't change their CSS properties back to normal (after mouse hover) when the cursor leaves the app

html

css

titlebar

electron