homepage Welcome to WebmasterWorld Guest from 54.196.195.158
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
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]

 

topr8




msg:4364672
 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

dupalo




msg:4364895
 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 : - )

rocknbil




msg:4365437
 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]

dupalo




msg:4366695
 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