How to apply nested css using jQuery?

Question

I have stylesheet.css file which contain the following:

.vertical-navigation .navbar-default .navbar-nav > li > a:hover {
    background-image: url(../images/sticcky_nav_hover.png)
}
.vertical-navigation .navbar-default .navbar-nav > li > a.navfirst:hover {
    background-position: 28px -2px;
}
.vertical-navigation .navbar-default .navbar-nav > li > a.navsecond:hover {
    background-position: 24px -82px;
}

How to apply this hover css on click of the <a href...> element and hover effect should remain after the click event ?

Answer 1

I'll show you have you can achieve this for the first a tag. You can replicate the same for the remaining.

Change the CSS to assign those properties to another class as well, eg. selected

.vertical-navigation .navbar-default .navbar-nav > li > a:hover, 
.vertical-navigation .navbar-default .navbar-nav > li > a.selected {
    background-image: url(../images/sticcky_nav_hover.png);
}

Then add the following jQuery code to toggle the class on click event.

$('.vertical-navigation .navbar-default .navbar-nav > li > a').click(function() {
    $(this).toggleClass('selected');    
});

Hope this helps.

Answer 2

I think that's your solution (touch devices should work too)

      .vertical-navigation .navbar-default .navbar-nav > li > a:hover, 
      .vertical-navigation .navbar-default .navbar-nav > li > a:active {background-image: url(../images/sticcky_nav_hover.png)