View Full Version : img border not being applied

Jul 21st, 2010, 03:28 PM
on this page (http://karenschwartzdesign.com/wordpress/) i have a purple border (#660099) around the four Services images. I want that color to change to #CC0066 when someone hovers over it. seems to me like i have it coded correctly. but for some reason the link/visited/hover effects aren't being applied to these .service divs when I look at them with the firebug tool.

.service {width: 420px; text-align: center; float:left; padding: 2px 6px; font-size: 14px; font-weight: bold; margin-bottom:4px;}
.service img a:link, .service img a:visited { border: 2px #660099 solid; }
.service img a:hover { border: 4px #CC0066 solid; }

<div id="featured-projects-bg">
<div class="service">LOGOS &amp; FINISHED ART<a href="#"><img src="/wordpress/wp-content/uploads/logo-design.jpg" alt="Philly logo graphic designer"></a></div>
<div class="service">BROCHURES, BOOKS &amp; NEWSLETTERS<a href="#"><img src="/wordpress/wp-content/uploads/newsletter-design.jpg" alt="Philadelphia newsletter designer"></a></div>
<div class="service">MAPS &amp; CHARTS<a href="#"><img src="/wordpress/wp-content/uploads/map-design.jpg" alt="Philadelphia map designer"></a></div>
<div class="service">MISCELLANEOUS DESIGN<a href="#"><img src="/wordpress/wp-content/uploads/event-design.jpg" alt="graphic art event design"></a></div>
</div><!--end featured-projects-bg-->

what am i missing??? thanks in advance.

Jul 21st, 2010, 03:34 PM
Your reference is incorrect

.service img a:hover

That presumes you have the following tree child nodes structure:

element with class service (the div) -> img tag -> a tag

But your real structure is different:

element with class service (the div) -> a tag -> img tag
(a div, with a link in it, with an image it it)

Don't mention that an img element is a non-empty tag, thus it can not have child nodes.

So that I think you should refer the tag like:

.service a:hover

same with the other pseudoclasses.

Jul 21st, 2010, 04:08 PM
thanks. that kind of helps. but it doesnt seem to be changing the border that's immediately around the pictures. just adding a second. how do i change that border around the pictures?

i cant even find that element in the CSS. but something is applying that purple border. :confused:

Jul 21st, 2010, 04:12 PM
You missed the point we were trying to tell you.

.service a:link, .service a:visited { border: 2px #660099 solid; }
.service a:hover { border: 2px #CC0066 solid; }

ONLY styles the links, not the images inside of them.
You want this

.service a:link img, .service a:visited img { border: 2px #660099 solid; }
.service a:hover img { border: 2px #CC0066 solid; }

Jul 21st, 2010, 06:30 PM
got it. thanks!!!