Электрон: Пользовательская заголовок: кнопки не меняют свои свойства CSS обратно на нормальные (после наведения мыши), когда курсор покидает приложение

Question

Приветствую! Это мой второй пост сегодня, но так люди учатся, верно? Тем не мение! Я создаю приложение с помощью Electron и хочу создать собственную строку заголовка. Я добился успеха, но есть небольшая деталь, которая меня беспокоит. Я хочу, чтобы кнопки меняли свою непрозрачность, когда мышь наводит на них курсор, но когда курсор покидает приложение после наведения кнопок, они не меняются. Вместо этого мне снова нужно go приложению, снова навести кнопку и, наконец, увидеть правильное поведение. Есть ли способ это исправить? Это не так фатально, но я стараюсь, чтобы мое приложение выглядело как можно лучше и приятнее для глаз!

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;
}

Хорошего дня! Дайте мне знать, если у вас есть вопрос или решение просто не работает для вас!