Иконки и всплывающие подсказки - PullRequest
Новая
       41

Иконки и всплывающие подсказки

0 голосов
/ 30 января 2020

Я новичок здесь, и у меня есть некоторые проблемы с моим HTML / css. Вот моя проблема: у меня есть 3 иконки, вставленные таким образом в div в моем заголовке. Моя проблема в том, что если я нажимаю на один из моих значков, это показывает мне некоторый текст во всплывающей подсказке, но если нажать на 2-й или 3-й значок, предыдущий всплывающий подсказка остается. Могу ли я сделать что-то, чтобы удалить предыдущую подсказку, когда я нажимаю на другую? значок ?

Html часть это: 

<div class="icones">
<a href="#"><i class="fab fa-3x fa-discord"></i>
<span id="p1">Pisha La Rashma</span>
</a>
<a href="#"><i class="fab fa-3x fa-steam"></i>
<span id="p2">Pisha Lgorithmique</span>
</a>
<a href="#"><i class="fab fa-3x fa-twitch"></i>
<span id="p3">www.pishaniquetout.com</span>
</a>

CSS часть: 

.icones a:hover
{
    color: darkgrey;

}
.icones a
{
    padding: 0 1em 0;
    text-decoration: inherit;
    color: inherit;
    color: white;


}

.icones
{
    margin-top: 45vh;

}

a span#p1
{
    position: absolute;
    opacity: 0;
}

a:hover span#p1, a:focus span#p1
{
    opacity:1;
    color: white;
    margin-top: 3.3em;
    font-family: 'police1';
}
a span#p2
{
    position: absolute;
    opacity: 0;
}

a:hover span#p2, a:focus span#p2
{
    opacity:1;
    color:white;
    margin-top: 3.3em;
    margin-left: -5em;
    font-family: 'police1';
}
a span#p3
{
    position: absolute;
    opacity: 0;
}

a:hover span#p3, a:focus span#p3
{
    opacity:1;
    color:white;
    margin-top: 3.3em;
    margin-left: -10em;
    font-family: 'police1';
}
...