Greetings, I apologize for any language barriers. I will do my best to articulate my issue clearly. I have experimented with various approaches and reviewed similar questions, but unfortunately, I am unable to resolve the problem...
I have created a title using an acronym and would like to display an explanation when the user hovers over it. To achieve this, I have implemented a hover event. However, I am encountering an issue where the span element generated by the hover remains behind other elements on the page despite setting its position to absolute.
Below is the code snippet for reference:
a{
color:#FFFFFF;
}
a:hover, a:focus{
background:rgba(0,0,0,.4);
box-shadow:0 1px 0 rgba(255,255,255,.4);
}
a span{
position:absolute;
margin-top:50px;
margin-left:-30px;
color:#FFFFFF;
background:rgba(30,144,255,.9);
padding:15px;
border-radius:3px;
box-shadow:0 0 2px rgba(30,144,255,.5);
transform:scale(0) rotate(-12deg);
transition:all .25s;
opacity:0;
}
a:hover span, a:focus span{
transform:scale(1) rotate(0);
opacity:1;
}<div id="header"><h1 id="mainTitle" class="text-center">Welcome to <a href="#">YETI<span>Your Efficient Technical Item</span></a> Finder</h1></div>Any assistance provided would be greatly appreciated! -Corentin.