伪元素上的过渡在Firefox浏览器上不起作用

Bruno Tavares 发表于 Dev

布鲁诺·塔瓦雷斯（Bruno Tavares）

我原本希望Internet Explorer能够做到这一点，但是我心爱的Firefox让我失望了。

这种提琴在Firefox上不起作用（至少对我而言，它没有），我想知道为什么。我看过很多文档，我想这应该可以工作。

这是小提琴：http : //jsfiddle.net/6UFX7/11300/

HTML：

<div id="nav">
    <ul>
        <li><a>ENTRY</a></li>
        <li><a>ENTRY</a></li>
        <li><a>ENTRY</a></li>
        <li><a>ENTRY</a></li>
        <li><a>ENTRY</a></li>
    </ul>
</div>

CSS：

#nav 
{   
height:60px;
background-color:#FFFFFF;
overflow:hidden;
}

#nav ul 
{
color: #f2f2f2;
margin-top:20px;
list-style-type: none;
text-align: center;
float:left;
}

#nav ul li
{
display: inline-block;
*display: inline;
zoom: 1;
margin: 0 10px;   
}

#nav ul li a 
{
color: #8198A0;
font-style: normal;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.25px;
text-transform: uppercase;
text-decoration: none;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-o-transition: color 0.5s ease;
transition: color 0.5s ease;
}

#nav ul li a:after 
{
margin-top:16px;
content: "";
display: block;
height: 5px;
width: 0;
-webkit-transition: width 0.5s ease, background-color 0.5s ease;
-moz-transition: width 0.5s ease, background-color 0.5s ease;
-o-transition: width 0.5s ease, background-color 0.5s ease;
transition: width 0.5s ease, background-color 0.5s ease;
pointer-events:none;
}

#nav ul li a:hover:after 
{
width: 100%;
background-color:#8198A0;
}

#nav ul li a:hover
{
cursor: pointer;
}

关于“指针事件：无”的另一个快速问题：

它可以在Internet Explorer上正常运行，但不能在Chrome上正常运行（由于上述问题，我无法在Firefox上对其进行测试）。

提前致谢！

亚历山大·奥玛拉

这似乎是因为#nav ul li a元素是默认值display: inline。添加display: inline-block;到这些元素可以解决此问题。

工作示例：

#nav 
{   
    height:60px;
    background-color:#FFFFFF;
    overflow:hidden;
}

#nav ul 
{
    color: #f2f2f2;
    margin-top:20px;
    list-style-type: none;
    text-align: center;
    float:left;
}

#nav ul li
{
    display: inline-block;
    *display: inline;
    zoom: 1;
    margin: 0 10px;   
}

#nav ul li a 
{
    color: #8198A0;
    font-style: normal;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.25px;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    -webkit-transition: color 0.5s ease;
    -moz-transition: color 0.5s ease;
    -o-transition: color 0.5s ease;
    transition: color 0.5s ease;
}

#nav ul li a:after 
{
    margin-top:16px;
    content: "";
    display: block;
    height: 5px;
    width: 0;
    -webkit-transition: width 0.5s ease, background-color 0.5s ease;
    -moz-transition: width 0.5s ease, background-color 0.5s ease;
    -o-transition: width 0.5s ease, background-color 0.5s ease;
    transition: width 0.5s ease, background-color 0.5s ease;
    pointer-events:none;
}

#nav ul li a:hover:after 
{
    width: 100%;
    background-color:#8198A0;
}

#nav ul li a:hover
{
    cursor: pointer;
}

<div id="nav">
    <ul>
        <li><a>ENTRY</a></li>
        <li><a>ENTRY</a></li>
        <li><a>ENTRY</a></li>
        <li><a>ENTRY</a></li>
        <li><a>ENTRY</a></li>
    </ul>
</div>

至于这个pointer-events问题，如果这还不能解决问题，那么您可能应该专门问一个问题。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。