：活動班級不工作

-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

：活動班級不工作

回答

相關問題