change border around image on mouse hover

image,hover

[dupalo]

HI there, I was experiencing a curious problem with my css.
What I was trying to do is to have a yellow border around a picture link when you hover on the image.
The hover on the "animal" image the border is broken and not only that, but it overlaps the black border. This is what I have done.
In the html I have

<div class="animals_photo_box">
<a href="animals.htm"><img src="images/gloom_test.jpg" alt="" style="border:0"></a>
</div><!-- END OF animasl_photo_box -->

then in the css:

.animals_photo_box a:hover {
border: 2px solid yellow;
}

and this:

.animals_photo_box {
border: 2px solid black;
width:250px;
height:170px;
margin: 10px auto 20px;
}

I have been trying for a while but I couldn't get it to work.
I have also tried instead of

.animals_photo_box a:hover {
border: 2px solid yellow;
}

this

.animals_photo_box img:hover {
border: 2px solid yellow;
}

but the border doesn't display at all and I have also tried:

.animals_photo_box :hover {
border: 2px solid yellow;
}

but same result...uhm.
Now just by change I got it to work having (although it is not live yet):

.animals_photo_box:hover {
border: 2px solid yellow;
}

I was wondering why this is the case, why if I put a space between "animals_photo_box" and ":hover" the border doesn't work?
thanks

[edited by: alt131 at 5:12 am (utc) on Sep 20, 2011]
[edit reason] Thread Tidy [/edit]

[topr8]

... not sure i understand the question?

it's just the syntax ... you can't have a gap between the pseudo class eg :hover and what you want it to operate on

[dupalo]

hi there, thanks, wasn't sure whether it was a syntactic error or not
thanks for that : - )

[rocknbil]

why if I put a space between "animals_photo_box" and ":hover" the border doesn't work?

Easy to grok if you look at this.

<p class="animals_photo_box">Class 1<span>Span inside class</span></p>


.animals_photo_box { color:#000; }
.animals_photo_box span { color: #ff0000; }

Note the second rule changes any span inside the class animals_photo_box to red. So with a space, a pseudo class is looking for an element ":hover" inside ".animals_photo_box" which of course there isn't. Never tried it, might make for an interesting experiment (that will probably fail . . .)

<p class="animals_photo_box">Class 1<:hover">Span inside class</:hover></p>

[edited by: rocknbil at 5:01 pm (utc) on Sep 21, 2011]

[dupalo]

cool thanks