Question

我有一个简单的菜单，我建立了，我正在尝试添加动画。我在悬停动画上添加了一张幻灯片，但是当您将鼠标悬停在该项目上时，幻灯片动画将覆盖阻止它的文本。我很确定这将是一个简单的解决方案，我正在寻找，但帮助将不胜感激。问题来自这些CSS类我很确定：

.nav2Active{
    font-size:16px;
    font-weight:bold;
    padding-top:10px;
    padding-bottom:10px;
    width:100px;
    border-left:thin solid transparent;
    background:transparent;
}

.nav2Active::before{
    content:'';
    background:red;
    position:absolute;
    height:30px;
    width:0%;
    -webkit-transition:width .3s ease-out;
    -moz-transition:width .3s ease-out;
    -ms-transition:width .3s ease-out;
    z-index:0;
}

.nav2Active a{
    color:#000;
    text-decoration:none;
    padding-left:10px;
}

.nav2Active:hover::before{
    border-left:thin solid #F60;
    width:100px;
}

.nav2Active:active{
    background: #CCC;
    border-left: #F60;
}

http://jsfiddle.net/pwfv33hs/

Answer 1

干草很容易做到这一点：

.nav2Active:hover::before{
    border-left:thin solid #F60;
    width:100px;
    z-index:-1
}

Answer 2

这是z-index问题，您为伪元素= 0设置了一个值。

.nav2Active::before{
    z-index:0;
}

但是所有元素都具有与默认值相同的值。为了工作，您可以设置-1值。但我不喜欢使用这些负面价值观。我建议这个：

.nav2Active a{
    position:relative;
    z-index:1;
}

检查 UpdatedFiddle

出现在文本的背景图像

2 个答案: