Obscure break in div tag

Question

I am trying to make a div which expands to show hidden content when hovered over. However there seems to be a random space in between images inside the div, hence a premature onmouseout method call. Is there any way to get rid of this problem?

Check out a live version here.

Answer 1

The onmouseout event bubbles.

Therefore, you get the event whenever the mouse moves out of one of your child elements.

You need to check event.target and make sure it's the <div> element. (Or use jQuery's hover method)

Answer 2

Where exactly is the problem? is it the black space between the first two car images when you hover over the first car? The div is expanding to more than what the image width is. set the width of the image to be 300px. Then try setting margin,border,padding to zero on all container divs

div.itemHolder {
border:0 none;
margin:0;
padding:0;
}

I think that since you are setting both the height AND width properties, that the image is coming up with a weird aspect ratio. try setting only one of them. If that is not a part of your worries, please ignore

Answer 3

I must not have explained this clear enough, but we managed to fix the issue.

Many thanks for the responses.