Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Liam Nolan
Liam Nolan
9,826 Points

Change background of parent div when hover on child div using jQuery

I am trying to change the background image of a div when the user hovers over a div within that div.

Here is what I have so far:

$('#child-div').hover(
  function(){$('#parent-div').css({background-image: "url(../img/new-image.png)"})},
  function(){$('#parent-div').css({background-image: "url(../img/original-image.png)"})}
);

What am I doing wrong??

4 Answers

Liam Nolan
Liam Nolan
9,826 Points

Thanks guys, used a mix of both of you and still couldn't work it out, but found out why.. for some reason the '../' in the url for the image was messing it up, even though I do have to go up a directory from my js file and back down into the img directory. I simply removed the ../ and it worked, any idea why?

Chris Shaw
Chris Shaw
26,650 Points

I believe you may have fallen into a known trap which is common if you're new to a language like JavaScript and that's the relative path trap, essentially you set a path based on where the script is executing from and for instance assume it behaves like CSS which it doesn't execute the same way that JavaScript does.

This causes problems as you can easily get the impression that because it acts like that in CSS that JavaScript must too, well the trap is feeding you a lie, whenever JavaScript runs on a page it's executing relative to the websites path; for example:

https://example.com

This is the relative path for the site, this is where your JavaScript executes

https://example.com/css/styles.css

The relative path for this CSS file is different, instead it's working from the css directory which means you need to use ../ to go back a level.

Hopefully that clears it up, I fell into this trap and quickly learned that each language doesn't something slightly different but in a way that can throw you off even in the most simplistic of circumstances.

Andrew Shook
Andrew Shook
31,709 Points
$('#child-div').hover(
  function(){
      $(this).parent().css({'background-image': "url(../img/new-image.png)"})
 },
  function(){
      $(this).parent().css({'background-image': "url(../img/original-image.png)"})
  }
);

Edit: as Chris pointed out, the background-image should be passed to the .css method as a string.

Chris Shaw
Chris Shaw
26,650 Points

Hi Liam,

As Andrew showed above you can use the parent() method to change the background image but that still won't work as background-image will cause a syntax error because objects can't have hyphens in their key names, also the hover method is a short cut to the mouseenter and mouseleave events therefore I always like to use them instead as it's easier to read and understand.

See the below example.

$('#child-div').on('mouseenter mouseleave', function(e) {
    var image = e.type === 'mouseenter' ? 'new' : 'original';
    $(this).parent().css('background-image', 'url(../img/' + image + '-image.png)');
});

One other thing I'll touch on is jQuery offers the ability to use camel case for CSS property names that contain hyphen, below are a few example but you can use it on any property that has an hyphen.

  • background-image = backgroundImage
  • z-index = zIndex
  • background-color = backgroundColor

etc.

Liam Nolan
Liam Nolan
9,826 Points

That's brilliant Chris thanks for your help. As you can tell I'm new to all of this so thanks for the heads up!

Chris Shaw
Chris Shaw
26,650 Points

Not a problem, I was in the same situation when I first started out, just happy to help out