apply a hover border to an image

I'm not able to get a hover on my images to work, I'm su开发者_如何学编程re I'm targeting the css hover incorrectly, but I also have some jquery that is attached the the images which may be causing the conflict.

Here is the fiddle:

http://jsfiddle.net/MLS1984/9zwsJ/

Basically I just the border to appear on a hover state.

#content #team a:hover img.teamimg {
   padding:3px;
   border:1px solid #021a40;
}

http://jsfiddle.net/AlienWebguy/KB9S4/

Two things appear wrong to me.

Your a is outside the image but your selector is looking for it inside. Also, you have a typo: teaming and teamimg don't match up.

So change:

#content #team img.teaming a:hover {

to

#content #team a:hover img.teamimg {

It should be:

#content #team a:hover img.teamimg

You had:

#content #team img.teaming a:hover

Two things wrong with this. First teaming is wrong, it's teamimg (an m not an n). 2nd, the img comes before the a

Here's the solution

http://jsfiddle.net/9zwsJ/14/

#content #team a.panel3:hover img {
   padding:3px;
   border:1px solid #021a40;
}

You're mis-ordering this style:

#content #team img.teaming a:hover

img.teaming is inside the tag, therefore it should read:

#content #team a:hover img.teaming

I don't believe that will work in all browsers, however (ie?). If you know all the links in that unordered list are going to contain images, you could just apply the border to the a tag itself:

#content #team a:hover

or

#content #team a.panel13:hover

Best of luck!

The img is inside the a, so you want to target the a and move it before the img in the CSS selector. You can see my work here: http://jsfiddle.net/Skooljester/9zwsJ/16/