Background position change on active link - image based navigation

Question

I am trying to make a navigation that has images (logos) of the products. They are grey in color in normal state. And on hover the background position changes showing their colored state.

The next step I want to add is having the active link show the colored logo, and the other link stay in normal state.

I would image that can be done by adding active class to the active link, but I know how that works for color/background color changes. But I am not sure how to make it work with images when each li would have a different image. I tried using the code I know or have found a few times in my attempts, but they dont seem to work.

I am still a beginner to javascript & jquery so please bear that in mind, before just rejected the question and negating it with downvotes. Someone voted me down earlier becz I didnt show the attempt I ahead made, and then another person voted me down. It just was of no help but only worsens my chances of getting help.

I was suggested to make a fiddle so here goes

http://jsfiddle.net/itsnamitashetty/cEzd4/5/

<script>
  var active_menu = $('nav a').click(function(){
active_menu.removeClass('active');
$(this).addClass('active');
});

</script>

it doesnt do the same thing but I want it to stay the same as the hover state when the link is active.

If you see, this code shows that the active class is added to the link but it rejects the rules applied to it.

Answer 1

The problem stems from specificity of the CSS assignments. The background-position value with a unique ID (e.g a#crw_link) is more specific than the css class name of .active, so it's background position will always override it.

I recommend you create a more universal style for all the navbar items, which also moves the background-position out of the ID css assignment.

nav a {
    width:285px;
    height:93px;
    background-position:0 0;
    background-repeat:no-repeat;
}

You can now assign active and hover states to the class assignments.

nav a.active, nav a:hover {
    background-position:0 13px;
}

And finally you specify each unique image to the ID assignments like the following:

nav a#crw_link {
    background-image:url('http://www.veseys.com/ca/en/images/products/small/10171.jpg');
}
nav a#cww_link {
    background-image:url('http://www.veseys.com/ca/en/images/products/small/10170.jpg');
}

http://jsfiddle.net/cEzd4/7/

Answer 2

What about like this fiddle:

html:

<nav id="headnav" class="menu">    
   <ul id="navlist">                                              
       <li><a href="#div1"><img src="http://www.veseys.com/ca/en/images/products/small/10171.jpg" /></a></li>                                                
        <li><a href="#div2"><img src="http://www.veseys.com/ca/en/images/products/small/10170.jpg" /></a></li>                                             
   </ul>    
</nav>

css:

nav{
    position:relative;
    height:auto;
    margin:0 auto;
}
nav ul {
    list-style:none;
    margin:0;
}
nav li { 
    position: relative;
    float: left;
}
nav img {
    opacity:.5;
    -webkit-transition:all 200ms;
    -o-transition:all 200ms;
    -moz-transition:all 200ms;
    transition:all 200ms;
}
nav li:hover img, nav img.active {
    opacity:1;
    margin-top:20px;
}
nav li a {
    display:block;
    padding: 10px;
    margin-right: 5px;
}

js:

var active_menu = $('nav img').click(function () {
      active_menu.removeClass('active');
      $(this).addClass('active');
});