Проблема с эффектом всплывающей подсказки, не появляющимся над кнопкой – Нужна помощь ⇐ CSS

[Гость]

Я столкнулся с проблемой при попытке создать всплывающую подсказку для кнопки «Верхняя часть» на моей веб-странице. Эффект всплывающей подсказки не отображается над кнопкой, и мне не удается понять, почему.
Вот код, который я использую:

Код: Выделить всё

interface


/* Styles for the "Back-end" button */
.back-end_link{
display: flex;
}
.back-end_link button{
background-color: rgba(0, 0, 0, 0.993);
color: aliceblue;
border: transparent;
transition: 0.5s;
font-size: 30px;
box-shadow: inset 0 0 0 0 rgb(0, 0, 0);
}
.back-end_link button:hover{
border: none;
background-color: rgba(255, 255, 255, 0.949);
color: rgba(0, 0, 0, 0.485);
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.373);
transform: scale(0.9);
letter-spacing: 3px;
box-shadow: inset 0 0 10px rgb(255, 255, 255), 0 0 40px rgb(255, 255, 255), 0 0 80px rgb(255, 255, 255);
}
.details-back-end{
color: #fff;
visibility: hidden;
opacity: 0;
}
.back-end_link:hover .details-back-end{
visibility: visible;
opacity: 1;
}
.details{
font-family: "Kanit", sans-serif;
display: flex;
position: absolute;
justify-content: center;
align-items: center;
width: 1100px;
color: aliceblue;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.575);
}







[url=login.html]
login
[/url]



[url=registro.html]
registre-se
[/url]





[url=#]

FRONT-END

[/url]

[url=#]

BACK-END

[/url]




DETAILS ABOUT FRONT-END

DETAILS ABOUT BACK-END

Я попробовал несколько способов решить эту проблему, но всплывающая подсказка просто не появляется при наведении курсора на кнопку «Верхняя часть».
Если кто-нибудь сможет помочь мне определить, что я делаю неправильно, я буду очень признателен!
Спасибо.

Подробнее здесь: https://stackoverflow.com/questions/784 ... assistance