How to Highlight the Menu in css. I used a:active but it does not serve the purpose I expected

Tags: html,css,html5,css3,

Problem :


<li>@Html.ActionLink("Tools", "Index", new { Area = "", Controller = "Tools" })</li>


    font-weight: bold;
    background: #F96611;
    border: 3px solid #FFB380;

a:active works only between mouse click press and release. But I need the menu to be in highlighted after the mouse click of a menu. Thanks

Solution :

You cant add in css. .active applies for click only but not for active state. you can use the below jquery code for adding class on click

$('li').click(function() {

    CSS Howto..

    CSS HTML How to make a larger image than div display in full in div

    How to make text svg-animation launch when visible?

    How to menu on one line and always in center?

    How to copy the GTK style of a widget and apply it to another?

    How does reveal.js resize elements?

    CSS: how do I force contents in a table cell to stay on one line when browser size reduced

    How to remove unwanted white space in CSS

    how to style a symfony2 form button

    How to join multiple rounded images one by one using line in css or css3

    StackLayoutPanel Shows white ends at the rounded corners

    How to use CSS position(relative, absolute) with percentage (height, width) dimension? [closed]

    How to make div 10% of device screen height css

    Why do small spaces keep showing up in my web pages?

    How to position background image in bottom right corner? (CSS)

    How to center an unordered list?

    How to make table td take the width of its content

    How to pass to next line that cutted elements in a list?

    how to read the following css class

    How to use Aural CSS?

    How to split an HTML paragraph up into its lines of text with JavaScript

    CSS how to select first occuring element after another element

    How do I size an image to fit inside another image? [closed]

    How do you style/select inline-block elements in the first row when in a flexible container?

    How to get a hidden content to show over cursor using html, css, javascript?

    Hover over image making it transparent and showing text

    How to keep floating labels floating after input. Pure CSS

    how to center submenu under the parent `
  • `
  • How do I make the 'panel/well' dynamically wrap around the image while keeping it centered? // Using Bootswatch/Bootstrap CSS

    How to use a Video as text background in css

    How to control the HTML area to the right?