css change container image on hover

Hi guys,

I am trying to get the container image to change here (http://www.deans-place.co.uk/problem.html) using :hover.

Firstly any idea why its not working? And secondly, I have a feeling each of my divs inside the container will try to take on the :hover background? which obv I don't want.

Thanks,
Dean
deanlee17Asked:
Who is Participating?
 
Chris StanyonCommented:
If you're talking about the .Homepage_Container1, then this will do it:

.Homepage_Container1:hover {
   background-image: url('someImage.jpg');
}

Open in new window

0
 
Chris--WCommented:
The other option is to use HTML rather than CSS, since your images aren't backgrounds:

<img src="image1.gif"
onmouseover="this.src='image2.gif'"
onmouseout="this.src='image1.gif'"> 

Open in new window

0
 
deanlee17Author Commented:
I think ChrisStanyon is correct here as the container image is a background image. But a useful tip from Chris-W.

Thanks guys.
0
 
Chris StanyonCommented:
FYI - dropping javascript in-line is not really considered best practice anymore.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.