Question

首先，对不起我的英语，我会尽量保持清醒。我尝试了很多东西并看了一些与我的问题相关的问题，但我无法解决它......

我用一个首字母缩略词制作了一个标题，我想在用户将鼠标放在它上面时解释它。这就是我使用悬停事件的原因，但我的问题如下：我无法通过悬停在所有内容的顶部获得跨度，它总是落后于我的其他元素，尽管：{{1 }}

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

＆＃13;

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;
}

＆＃13;

感谢您的帮助！ Corentin。

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

我的跨度在悬停事件中落后于我的div

1 个答案: