Changing background image/colour

JavaScript
1

Hey All,

This is a jQuery question, but there wasn’t a specific jQuery forum so I thought I’s post here. I’m having a problem with changing the background image on an element when I use the .hover() and .toggleClass() methods. Here’s some code:

First the CSS:


.down-arrow { 
  cursor: pointer; 
  background: #efefef url(images/arrow-down.png) no-repeat 13px 13px; 
}

And the jQuery:


$('.view-business-card-gallery .views-table tbody').hide();
	$('.view-business-card-gallery .views-table caption')
		.hover(
			function(){ $(this).toggleClass('down-arrow',true); },
			function(){ $(this).toggleClass('down-arrow',false); })
		.click(
			function() {
				$(this).siblings('tbody').slideToggle('fast');
			});

Right -so basically what this is supposed to do is:

  1. on page load, set all <tbody> elements to display: none; - does that no probs.
  2. user hovers over a <caption> element, the cursor changes to a pointer and the background goes grey and displays a down arrow graphic (indicating a call to action)
  3. user hovers off the <caption> and the grey goes away and cursor changes back to default.
  4. user clicks the <caption> and that <tbody> shows up. - does that no probs.

The issue I’m having is with points 2/3 - the cursor will change between pointer and default, but I cannot get the background changes to register at all. I’ve tried with toggleClass() (as in this eg) and addClass() / removeClass(), but they don’t seem to work either.

:mad:

It seems to work ok(ish) if I use the .css() method and change it directly in the code, but I want to try and keep my styling only in my CSS file and use classes to make the change.

Anybody have any thoughts?

thanks a lot!!

Pix

2

Sounds as though it could be a problem with your background property within the css…are you sure its linking to the correct location (can you view the requests and see if it is attempting to load the image when the class is added to the element?)

3

Yeah, the image is definitely there and in the right place. I can reference it through FireBug.

It definitely adds the class to the element (coz the cursor changes) but doesn’t recognise the background detail (not even the background colour)