JQuery set active / hover background images

Question

I have a list in which there are 5 elements, the first (at boot) is active (with the "active" class added by jQuery). All have background images associated with them. If I click on any of li, add another div with the appropriate content (this works).

However, I struggle with the following:

If you click on li, refresh its background image as a color (suffix "-cl.png"). When I am on top of another, update its background image so that it is color, and keep the color pressed (with the “active” class). If li does not freeze, set the background image as black and white (suffix "-bw.png"), but keep the active one color.

I hope I have clearly explained. Any ideas on how I can achieve this? Thanks Brett

Here is my HTML:

<ul class="graduate_tab">
<li class="graduate1"><a href="#grad1"><span class="gradimg1">grad1</span></a></li>
<li class="graduate2"><a href="#grad2"><span class="gradimg2">grad2</span></a></li>
<li class="graduate3"><a href="#grad3"><span class="gradimg3">grad3</span></a></li>
<li class="graduate4"><a href="#grad4"><span class="gradimg4">grad4</span></a></li>
<li class="graduate5"><a href="#grad5"><span class="gradimg5">grad5</span></a></li></ul>

Answer 1

First, I would do most of the work in CSS, for example:

.graduate1 { background: url(image1-bw.png); }
.graduate1.active, .graduate1:hover { background: url(image1-cl.png); }
.graduate2 { background: url(image2-bw.png); }
.graduate2.active, .graduate2:hover { background: url(image2-cl.png); }
//etc...

Then in jQuery, all you need to worry about is a class active, for example:

$('.graduate_tab li').click( function() {
  $(this).addClass('active').siblings().removeClass('active');
});

Using .addClass()on click, and .removeClass()the rest will move the class activeto the pressed one. If you want to remove it from the already active (disable it), you can replace .addClass()with .toggleClass()for this behavior.

Answer 2

$('.graduate_tab li').hover(
  function() { 
    $(this).css('background-image','your-image-cl.jpg'); 
  }, function() {
    $(this).css('background-image','your-image.jpg'); 
  });

$('.graduate_tab li').click( function() {
  $('.graduate_tab li').removeClass('active');
  $(this).addClass('active');
});

That should do the trick. If I forgot something, tell me and I will edit the code.

Answer 3

jquery click hover jquery. li css. :

.ui-state-active, .ui-state-hover  {
    font-weight: bold !important;
    //and other css
}

 jQuery('.graduate_tab li').bind('click hover', function () {
        jQuery(this).addClass('.ui-state-active')
                    .siblings().removeClass('.ui-state-active');

 });

, -.

Answer 4

:

css

active: hover {background-color: black;}

somthing ...

but I'm not sure if it will work in ie6.

Answer 5

    $('.titleclz').mouseenter(function( event ) {

    $(this).css('background-image','url(bg-image1.png path)');
    $(this).css('background-repeat','no-repeat'); 

});

$(".titleclz").mouseleave(function( event ) {

    $(this).css('background-image','url(bg-image2.png path)');
    $(this).css('background-repeat','no-repeat');

});

JQuery get background image effect ...