Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Liam Nolan
9,826 PointsChange 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
9,826 PointsThanks 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?
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
26,676 PointsHi 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
9,826 PointsThat'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
26,676 PointsNot a problem, I was in the same situation when I first started out, just happy to help out
Chris Shaw
26,676 PointsChris Shaw
26,676 PointsI 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.comThis is the relative path for the site, this is where your JavaScript executes
https://example.com/css/styles.cssThe relative path for this CSS file is different, instead it's working from the
cssdirectory 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.