将悬停边框应用于图像

Question

我无法悬停在我的图片上工作，我确定我的目标是css悬停不正确，但我也有一些jquery附加了可能导致冲突的图像。

这是小提琴：

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

基本上我只是在悬停状态下出现的边框。

Answer 1

我觉得有两件事情不对。

您的a位于图像之外，但您的选择器正在寻找内部。此外，您还有一个拼写错误：teaming和teamimg不匹配。

所以改变：

#content #team img.teaming a:hover {

到

#content #team a:hover img.teamimg {

Answer 2

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

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

Answer 3

应该是：

#content #team a:hover img.teamimg

你有：

#content #team img.teaming a:hover

这有两个问题。首先teaming是错误的，它是teamimg（m不是n）。第二，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/