在悬停事件中，我的 Span 落后于我的 div

Question

首先，抱歉我的英语不好，我会尽量说清楚。我已经尝试了很多东西并查看了一些与我的问题相关的问题，但我无法解决...

我用首字母缩略词制作了一个标题，我想在用户将鼠标放在它上面时进行解释。这就是我使用悬停事件的原因，但我的问题如下：我无法获得悬停在所有内容顶部创建的跨度，尽管有：position:absolute.[=13，它总是落后于我的其他元素=]

如果有人想看一下，这是我的代码：

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">Bienvenue dans <a href="#">YETI<span>Your Efficient Technical Item</span></a> Finder</h1></div>

感谢您的帮助！科伦廷

Answer 1

试试这个。它可能会在悬停时将其提前

a:hover span, a:focus span{
    transform:scale(1) rotate(0);
    opacity:1;
    z-index: 1;
}

您可能需要将 z-index 放在跨度本身上。

这里有一个参考：http://www.w3schools.com/cssref/pr_pos_z-index.asp

在悬停事件中，我的 Span 落后于我的 div

My Span goes behind my divs on a hover event

css

hover