Active link css loose style after reload

Question

User1051638994 posted

Hello,

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 build 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?

thank you

Answer 1

User-474980206 posted

just include the nav in the CSS selector

.navleft li a.active { 

Answer 2

User1400794712 posted

Hi mspace,

a:active is used to set the style of active link.(Note: A link becomes active when you click on it.)

<ul class="navleft">

    <li><a href="@Url.Action("Details", "LeftContents")">Hello</a></li>
</ul>
<style>
    .navleft li a:hover {
        /*background: url('../Content/images/nav.png') no-repeat;*/
        background-color:blueviolet;
        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-color:brown;
        background-position: -232px 0;
        color: #fff;
        left: -6px;
        padding: 19px 18px 19px 40px;
        margin-top: -10px;
    }
</style>

How it works:

As you can see in the image, when I mouse over it, it will hit a:hover css. When I click on it, it will hit a:active css.

If you just want to get the link, class name of which is active, you should modify a:active to a.active, just like what bruce said.

Best Regards,

Daisy