如何通過突出顯示選定的鏈接？

下面的代碼應該保持選中的鏈接高亮顯示，但不是，它只在點擊時閃爍綠色。請幫我看看這裏失敗的原因。如何通過突出顯示選定的鏈接？

#sidebarContent a:active{ 
 
    background-color: green; 
 
}

<div id="sidebarContent"> 
 
    <ul> 
 
    <li style="margin-bottom:10px"><a style="outline:none" href="#">Manage</a></li> 
 
    <li style="margin-bottom:10px"><a style="outline:none" href="#">Links</a></li> 
 
    </ul>  
 
</div>

來源

2017-02-06 eldix_

您不必在href一個鏈接，你需要設置foucs變色

#sidebarContent a:active , #sidebarContent a:focus{ 
 
    background-color: green; 
 
}

<div id="sidebarContent"> 
 
    <ul> 
 
    <li style="margin-bottom:10px"><a style="outline:none" href="#">Manage</a></li> 
 
    <li style="margin-bottom:10px"><a style="outline:none" href="#">Links</a></li> 
 
    </ul>  
 
</div>

來源

2017-02-06 10:13:49

謝謝@Naila。完善！ –

使用:hover的亮點是：

#sidebarContent a:hover{ 
 
    background-color: green; 
 
}

<div id="sidebarContent"> 
 
    <ul> 
 
    <li style="margin-bottom:10px"><a style="outline:none" href="#">Manage</a></li> 
 
    <li style="margin-bottom:10px"><a style="outline:none" href="#">Links</a></li> 
 
    </ul>  
 
</div>

來源

2017-02-06 10:13:07

謝謝@ P.Franks，但我不想懸停，我希望鏈接在點擊它後保持突出顯示。 –

#sidebarContent a:focus{ 
 
    background-color: green; 
 
}

<div id="sidebarContent"> 
 
    <ul> 
 
    <li style="margin-bottom:10px"><a style="outline:none" href="#">Manage</a></li> 
 
    <li style="margin-bottom:10px"><a style="outline:none" href="#">Links</a></li> 
 
    </ul>  
 
</div>

來源

2017-02-06 10:13:57 Roy

，你必須編輯您的CSS。即

<style> 
    /* unvisited link */ 

    a:link { 
     background-color: red; 
    } 

    /* visited link */ 

    a:visited { 
     background-color: green; 
    } 

    /* mouse over link */ 

    a:hover { 
     background-color: hotpink; 
    } 

    /* selected link */ 

    a:active { 
     background-color: blue; 
    } 
</style>

來源

2017-02-06 10:14:55

如何通過突出顯示選定的鏈接？

回答

相關問題