SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot pixelz's Avatar
    Join Date
    Nov 2006
    Location
    Durban
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Changing background image/colour

    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:
    Code:
    .down-arrow { 
      cursor: pointer; 
      background: #efefef url(images/arrow-down.png) no-repeat 13px 13px; 
    }
    And the jQuery:
    Code:
    $('.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.



    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. #2
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Zealot pixelz's Avatar
    Join Date
    Nov 2006
    Location
    Durban
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •