：活动班级不工作

-1

我使用：之后和：之前psuedo元素有悬停在导航链接上的边框。我一直试图在以下方面具有相同的悬停边界效果：所以有人可以告诉我如何做到这一点。这里是我的代码：：活动班级不工作

nav ul .u { 
 
    position: relative; 
 
    color: f4f4f4; 
 
} 
 
nav ul li a:after, 
 
nav ul li a:before { 
 
    content: " "; 
 
    position: absolute; 
 
    display: block; 
 
    width: 0; 
 
    height: 2px; 
 
    transition: width .2s; 
 
} 
 
nav ul li a:after { 
 
    left: 10%; 
 
    bottom: -5px; 
 
    background-color: #f1c40f; 
 
} 
 
nav ul li a:before { 
 
    right: 10%; 
 
    top: -5px; 
 
    background-color: #f1c40f; 
 
} 
 
nav ul li a:hover { 
 
    color: #F4F4F4; 
 
} 
 
nav ul li a:hover:before, 
 
nav ul li a:hover:after { 
 
    width: 80%; 
 
} 
 
nav ul .active a:after, 
 
nav ul .active a:before { 
 
    content: " "; 
 
    position: absolute; 
 
    display: block; 
 
    width: 0; 
 
    height: 2px; 
 
    transition: width .3s; 
 
} 
 
nav ul .active a:after { 
 
    left: 10%; 
 
    bottom: -5px; 
 
    background-color: #f1c40f; 
 
} 
 
nav ul .active a:before { 
 
    right: 10%; 
 
    top: -5px; 
 
    background-color: #f1c40f; 
 
}

<nav> 
 
    <ul> 
 
    <li class="active"><a class="u" href="#">Home</a></li> 
 
    <li><a class="u" href="#">About</a></li> 
 
    <li><a class="u" href="#">Specials</a></li> 
 
    </ul> 
 
</nav>

来源

2015-10-06 Tejender Singh

这似乎有点过分。你为什么不使用正常的悬停风格。 – jessica

只需添加

nav ul li a:active { 
    color: yellow; 
}

到你的CSS。根据活动类的定义，每当用户点击链接时，他会看到链接的颜色变为黄色。

有关活动类更多的参考，可以通过这个链接：

https://developer.mozilla.org/en-US/docs/Web/CSS/%3Aactive

来源

2015-10-06 04:47:32 Shivi

谢谢，但不工作。我希望在活动状态下获得与悬停时相同的效果。 –

@TejenderSingh：它似乎在大众中起作用。请点击此处：http://plnkr.co/edit/chIunu?p=preview – Shivi

它已经在悬停，但未处于活动状态。实际上，当它们处于活动状态时，我需要链接顶部和底部的相同黄色边框。 –

-1

错误用法。

请检查定义后： ::后，它允许你插入内容到从CSS页面（无需重写是在HTML）的伪元素。

您可以使用正常的悬停样式来满足您的要求。

来源

2015-10-06 04:52:54

：活动班级不工作

回答

相关问题