html - Electron :自定义标题栏:当光标离开应用程序时，按钮不会将其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;
}

祝你有美好的一天!让我知道您是否有疑问或解决方案对您不起作用!