| change border around image on mouse hover
image,hover |
dupalo
msg:4364491 | 8:38 pm on Sep 19, 2011 (gmt 0) |
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]
|
|
