homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

change border around image on mouse hover

 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;
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;

.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?

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



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

... 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 Sep 20, 2011 (gmt 0)

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


 4:56 pm on Sep 21, 2011 (gmt 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 Sep 24, 2011 (gmt 0)

cool thanks

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved