CODEWITHSUNDEEP
jquerycssevents
Brett
Brett

Reputation: 1973

jQuery set active/hover background images

I have a list that has 5 items in, the first one (on load) is active (with a class of 'active' added by jQuery). They all have background images associated with them. If I click any of the li's another div updates with relevant content (this is working).

However I'm struggling with the following:

If you click an li, update its background image to be colour (suffix of '-cl.png'). When I hover over another one, update its background image to be colour and keep the clicked one (with a class of 'active') colour too. If an li is not hovered over set the background image to be black and white (suffix of '-bw.png') but keep the active one colour.

Hope I've explained myself clearly. Any ideas on how I can achieve this? Thanks, Brett

Here's 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>

Upvotes: 4

Views: 27185

Answers (5)

RICHARD HARTMAN
RICHARD HARTMAN

Reputation: 21

I used the click hover jquery function. No need to give each li a class in css. Hence:

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

and 

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

 });

Hope this helps someone.

Upvotes: 2

Sumith Harshan
Sumith Harshan

Reputation: 6445

    $('.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 image background hover effect...

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630429

First, I would do most of the work in CSS, like this:

.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 the active class, like this:

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

Using .addClass() on the clicked one and .removeClass() on the rest will move the active class to the clicked one...if you want to be able to remove it from an already active one (toggle it off) you can replace .addClass() with .toggleClass() for that behavior.

Upvotes: 4

3rgo
3rgo

Reputation: 3153

$('.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');
});

This should do the trick. In case I forgot something, tell me, and I'll edit the code.

Upvotes: 4

Guy Schaller
Guy Schaller

Reputation: 4700

you can use the :hover

property in css

active:hover {background-color:black;}

somthing like this...

but i am not sure it will work in ie6.

Upvotes: 0

Related Questions