Question

我是新来的，我的html / css有一些麻烦。这是我的问题：我在标题的div中以这种方式插入了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';
}

图标和工具提示问题

0 个答案: