CSS僞選擇器：僞活動之後：懸停

我試圖讓鏈接處於活動狀態時懸停上顯示的藍線。我正在構建一個有幾個不同視圖的角度應用程序，當用戶在視圖中處於活動狀態時，我希望在懸停時創建下劃線，以便在選擇鏈接時保留下來。我認爲它需要採用一個活動的僞選擇器，但是當我添加它時，它會取消懸停。任何建議，將不勝感激。CSS僞選擇器：僞活動之後：懸停

這裏是我當前的代碼：

footer { 
 
    width: 100%; 
 
    margin-top: 150px; 
 
    padding: 0 60px; 
 
    font-family: "Lora", serif; 
 
} 
 
footer a { 
 
    text-decoration: none; 
 
    color: #ABABAB; 
 
} 
 
a:after { 
 
    content: ''; 
 
    display: block; 
 
    margin: auto; 
 
    height: 3px; 
 
    width: 0px; 
 
    background: transparent; 
 
    transition: width .5s ease, background-color .5s ease; 
 
} 
 
a:hover:after { 
 
    width: 100%; 
 
    background: #00FFE9; 
 
} 
 
.nav-footer { 
 
    list-style: none; 
 
    padding: 0; 
 
    border-top: solid 2px #DEDEDE; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    font-size: 14px; 
 
    padding: 15px; 
 
}

<footer> 
 
    <nav class="nav-footer"> 
 
    <a ui-sref-active="active" ui-sref="friends">View Friends</a> 
 
    <a ui-sref-active="active" ui-sref="friend-search">Find Friends</a> 
 
    <a ui-sref-active="active" ui-sref="update">Update Profile</a> 
 
    </nav> 
 
</footer>

這裏是的jsfiddle：https://jsfiddle.net/uw8fqbyr/

來源

2016-09-23 StuffedPoblano

你嘗試'一：積極{文字裝飾：下劃線;}' –

@AatifBandey這似乎只是在我設置爲懸停的藍色上方添加另一條灰色線。 – StuffedPoblano

我的回答對你有幫助嗎？你可以使用'visited' –

當所選視圖處於活動狀態時，ui-sref-active =「active」指令將「活動」css類添加到標記。

您應該添加這個CSS規則

a.active:after { 
    width: 100%; 
    background: #00FFE9; 
}

來源

2016-09-23 06:11:58 Natiq

工作！非常感謝你！ – StuffedPoblano

@TalonHughes不客氣。請將答案標記爲已接受。 – Natiq

與

a:active:after {}

您可以爲你的錨文本裝飾。

來源

2016-09-23 06:10:27 Gabbax0r

嘗試 a:active{}

爲<a>標籤訪問

a:visited{}

來源

2016-09-23 06:13:16

嘗試以下

footer { 
 
    width: 100%; 
 
    margin-top: 150px; 
 
    padding: 0 60px; 
 
    font-family: "Lora", serif; 
 
} 
 

 
footer a { 
 
    text-decoration: none; 
 
    color: #ABABAB; 
 
} 
 

 
a:after { 
 
    content: ''; 
 
    display: block; 
 
    margin: auto; 
 
    height: 3px; 
 
    width: 0px; 
 
    background: transparent; 
 
    transition: width .5s ease, background-color .5s ease; 
 
} 
 

 
a:hover:after { 
 
    width: 100%; 
 
    background: #00FFE9; 
 
} 
 
a.active:after { 
 
    width: 100%; 
 
    border-bottom: 3px solid #00FFE9; 
 
} 
 

 
.nav-footer { 
 
    list-style: none; 
 
    padding: 0; 
 
    border-top: solid 2px #DEDEDE; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    font-size: 14px; 
 
    padding: 15px; 
 
}

<footer> 
 
     <nav class="nav-footer"> 
 
\t \t \t <a ui-sref-active="active" ui-sref="friends">View Friends</a> 
 
\t \t <a class="active" ui-sref-active="active" ui-sref="friend-search">Find Friends</a> 
 
\t \t \t <a ui-sref-active="active" ui-sref="update">Update Profile</a> 
 
\t \t </nav> 
 
    </footer>

來源

2016-09-23 06:18:24 Dhaarani

我也喜歡這個！謝謝！它運作良好，下劃線沒有懸停那麼厚，所以用戶可以告訴它有微妙的差別。 – StuffedPoblano

@TalonHughes謝謝。 – Dhaarani

只需添加以下代碼的鏈接永遠不會顯示下劃線上active狀態
a:active { text-decoration: none; }

來源

2016-09-23 07:18:21

CSS僞選擇器：僞活動之後：懸停

回答

相關問題