CODEWITHSUNDEEP
htmlcssasp.net-mvc-4
user1537319
user1537319

Reputation:

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

.cshtml

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

.css

a:active
{
    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

Upvotes: 0

Views: 777

Answers (4)

Bardt
Bardt

Reputation: 705

Active state works only while you holds on mouse button on a link. That's how it's supposed to be.

Check this fiddle to understand: http://jsfiddle.net/8fqGp/

If you want to persistently highlight the menu item, you should follow Sowmya's or Cupidvogel's answer.

Upvotes: 0

NedStarkOfWinterfell
NedStarkOfWinterfell

Reputation: 5243

This is possible with CSS (using visited). The CSS active pseudo-class applies only for the duration of the click, not afterwards. If you want a lasting effect, use visited, or better, Javascript. Through javascript you can also customize it so that the style is added or removed with alternate clicks:

$("#menu").click(function() {
  $(this).toggleClass('highlightclass');
});

Upvotes: 0

Kozet
Kozet

Reputation: 1143

after the mouse click of a menu , it becomes "visited" you should add this to your css :

a:visited
{
    font-weight: bold;
    background: #F96611;
    border: 3px solid #FFB380;
}

also there you can do it for a.hover and a.link

Upvotes: 0

Sowmya
Sowmya

Reputation: 26989

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() {
  $(this).addClass('youractiveclass'); 
})

Upvotes: 1

Related Questions