CODEWITHSUNDEEP
javascripthtmlcssasp.net-mvc
touinta
touinta

Reputation: 1031

Active link loses style after reload

in my MVC app I have a left menu which I need the active link css to keep style after reload

in my css I have

.navleft li a:hover {
    background: url('../Content/images/nav.png') no-repeat;
    background-position: -232px 0;
    color: #fff;
    left: -6px;
    padding: 19px 18px 19px 40px;
    margin-top: -10px;
}


.navleft li a:active {

 background: url('../Content/images/nav_active.png') no-repeat;
    background-position: -232px 0;
    color: #fff;
    left: -6px;
    padding: 19px 18px 19px 40px;
    margin-top: -10px;

}

and in my view

<ul class="navleft">
 @foreach (var item in Model.CLeftMenu.ToList())
 {

    foreach (var content in Model.LeftSiteContent.ToList())

      {
    if (item.LeftMenuID == content.LeftMenuID)
    {


 <li><a href="@Url.Action("Details", "LeftContents", new { id = 
 @content.LeftContentID })">@item.LeftMenuTitle</a></li>

     }
   }
 }

</ul>

which dynamically builds the menu . The hover statement it works fine but no the active. When I inspect the page it renders

<a href="/LeftContents/Details/4" class="active">Services</a>

It takes the class active by its own.

When I change my css to

.active {

 background: url('../Content/images/nav_active.png') no-repeat;
    background-position: -232px 0;
    color: #fff;
    left: -6px;
    padding: 19px 18px 19px 40px;
    margin-top: -10px;

 }

it works. But then all the active links in my site takes this style (which is and the reasonable). How can I achive this just for the leftmenu? Do I have to declare current as well? since I read that the pseudo code :active is just for the moment the user clicks on the item. I have seen this css class active after page reload but it doesn't work for me.

thank you

Upvotes: 0

Views: 478

Answers (1)

Overflowrun
Overflowrun

Reputation: 547

The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button and ends when it is released. The :active pseudo-class is commonly used on and elements, but may be used on other elements, too. enter link description here

there is no :active class need to be defined as .active

.navleft li a:active rename to .navleft li a.active {

Upvotes: 1

Related Questions