Reputation:
.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
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
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
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
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