Welcome to WebmasterWorld Guest from 54.146.221.231

Forum Moderators: not2easy

Message Too Old, No Replies

change border around image on mouse hover

image,hover

     
8:38 pm on Sep 19, 2011 (gmt 0)

Junior Member

joined:May 18, 2011
posts: 88
votes: 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]

8:19 am on Sept 20, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member topr8 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Apr 19, 2002
posts:3171
votes: 8


... 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
5:42 pm on Sept 20, 2011 (gmt 0)

Junior Member

joined:May 18, 2011
posts:88
votes: 0


hi there, thanks, wasn't sure whether it was a syntactic error or not
thanks for that : - )
4:56 pm on Sept 21, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


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]

1:11 pm on Sept 24, 2011 (gmt 0)

Junior Member

joined:May 18, 2011
posts:88
votes: 0


cool thanks