将悬停边框应用于图像

Question

我无法将图像悬停在我的图像上，我确信我的CSS悬停方式不正确，但我也有一些附加了图像的jquery这可能会导致冲突。

这里是小提琴：

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

基本上我只是边境出现在悬停状态。

Answer 1

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

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

Answer 2

有两件事对我来说显得不对。

您的a在图像之外，但您的选择器正在里面寻找它。此外，你有一个错字：teaming和teamimg不匹配。

因此改变：

#content #team img.teaming a:hover { 

到

#content #team a:hover img.teamimg { 

Answer 3

它应该是：

#content #team a:hover img.teamimg 

您有：

#content #team img.teaming a:hover 

这件事有两件事是错误的。第一个teaming是错的，它是teamimg（一个m不是n）。 2，img到来之前的a

Answer 4

这里的解决方案

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

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

Answer 5

你错序这种风格：

#content #team img.teaming a:hover 

img.teaming是内的标签，因此它应该阅读：

#content #team a:hover img.teaming 

我不相信会在所有的浏览器，但是，（即？）。如果你知道在无序列表的所有链接都将包含图像，你可以只适用于边境的一个标签本身：

#content #team a:hover 

或

#content #team a.panel13:hover 

祝您好运！

Answer 6

img位于a之内，因此您要将目标设定为a并将其移动到CSS选择器中的img之前。你可以在这里看到我的作品：http://jsfiddle.net/Skooljester/9zwsJ/16/