Question

I am trying to have an element rather like the Twitter tweets area. The DIV should be a different colour on mouseover with a new position for the background image.

Then when the user clicks the background image position should move again and the background colour should change only when the user is not on hover. I tried this but it will not work.

JS —

function reviews(id) {
    $('#reviews .review').removeClass('ractive');
    $(id).addClass('ractive');
}

CSS —

#reviews .review {
    font-family:"Lucida Grande", Arial, sans-serif;
    display:block;
    width:599px;
    padding-right:30px;
    background:url(images/ui/arrows.png) -60px -60px no-repeat;
}
#reviews .review:hover {
    background-position:605px 50px; 
    background-color:#E6F5F5;
    }
#reviews .review .ractive {
    background-color:#E2E2E2;
    background-position:605px -100px; 
}
#reviews .review .ractive:hover {
    background-color:#E6F5F5;
    background-position:605px -100px; 
}

HTML

<div class="review" onclick="reviews(this);">Blah Blah Blah Blah</div>

Any ideas what is wrong. The new class does not seam to be applied to the element.

Marvellous

Answer 1

$(id).addClass('ractive');

is not getting a proper selector. From your markup you should be doing.

$('.review').click(function() {
    $(this).addClass('ractive');
});

You should then REMOVE onclick="reviews(this); from your markup. If you are using jquery to apply classes, stick with that approach overall. Don’t mix obtrusive and unobtrusive javascript. The code posted above will add the ractive class to only the link you have clicked.

Also, change your css from #reviews .review .ractive to just #reviews .ractive. The class you have is looking for an element inside review with the class ractive, you don’t need that as the class is on the same element

#reviews .review:hover {
    background-position:605px 50px; 
    background-color:#E6F5F5;
    }
#reviews .ractive {
    background-color:#E2E2E2;
    background-position:605px -100px; 
}
#reviews .ractive:hover {
    background-color:#E6F5F5;
    background-position:605px -100px; 
}