подсказка отображается при наведении курсора через js, но не в css - PullRequest
Новая
       24

подсказка отображается при наведении курсора через js, но не в css

0 голосов
/ 18 апреля 2019

пытается переключить видимость некоторого простого диапазона с помощью css, похоже, он не работает.Когда написано в JS событие работает нормально.В чем проблема? 

document.getElementById('theme-tooltip').style.display = 'none'
document.getElementById('theme-btn').onmouseover = function(){
    document.getElementById('theme-tooltip').style.display = 'block'
}
document.getElementById('theme-btn').onmouseout = function(){
    document.getElementById('theme-tooltip').style.display = 'none'
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<div id = 'startpanel'></div>
<span id = 'theme-tooltip'>tooltip</span>
<div class="icon-bar">
    <a id='theme-btn'><i class="fas fa-palette"></i></a> 
    <a id='hotkeys-btn'><i class="fas fa-keyboard"></i></a>
    <a id='settings-btn'><i class="fas fa-cog"></i></a>
    <a id='changelog-btn'><i class="fas fa-book"></i></a>
    <a id='discord-btn'><i class="fab fa-discord"></i></a>
</div>

#theme-tooltip{
    color: white;
    position: absolute;
    top: 500px;
    width: 200px;
    height: 30px;
    background-color: #000;
    border-radius: 5px;
    padding: 10px;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    display: none;
}
#theme-tooltip:after{
    content: ' ';
    width: 0px;
    height: 0px;
    border-top: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom:10px solid #000;
    border-right:10px solid transparent;
    position: absolute;
    left: 50%;
    top: -40%;
    margin-left: -10px;
}
#theme-btn:hover #theme-tooltip{
    display: block;
}

тема-всплывающая подсказка будет отображаться всякий раз, когда мышь находится над theme-btn.

1 Ответ

0 голосов
/ 18 апреля 2019

То, как вы написали селектор #theme-btn:hover #theme-tooltip, предполагает, что ваша подсказка находится внутри элемента # theme-btn, а это не так.

Вы пытаетесь показать одну и ту же подсказку для каждой иконки,или у вас будет другой для каждой иконки?Если вам нужна отдельная подсказка для каждого значка, я бы поместил элемент подсказки после каждого тега.Вы также хотите обернуть каждую из этих пар значков-подсказок в контейнер, чтобы вы могли правильно расположить каждую подсказку: 

<div class="icon-wrapper">
    <a id='theme-btn'><i class="fas fa-palette"></i></a> 
    <span id = 'theme-tooltip'>tooltip</span>
</div>

и ваш CSS следующим образом: 

.icon-wrapper {
    display: inline-block;
    position: relative;
}
#theme-tooltip{
    color: white;
    position: absolute;
    top: 30px;
    left: -100px;
    width: 200px;
    height: 30px;
    background-color: #000;
    border-radius: 5px;
    padding: 10px;
    font-size: 14px;
    line-height: 22px;
    text-align: center; 
    display: none;
}
#theme-tooltip:after{
    content: ' ';
    width: 0px;
    height: 0px;
    border-top: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom:10px solid #000;
    border-right:10px solid transparent;
    position: absolute;
    left: 50%;
    top: -40%;
    margin-left: -10px;
}
#theme-btn:hover + #theme-tooltip{
    display: block;
}

Обратите внимание, что position:relative; на значке-обертке означает, что абсолютная позиция вашей подсказки должна быть относительно значка-обертки.

...