将悬停边框应用于图像

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）。第二，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

我不相信这会在所有浏览器中工作，但是（即？）。如果您知道该无序列表中的所有链接都将包含图像，您可以将边框应用到 a 标签本身：

#content #team a:hover

或

#content #team a.panel13:hover

祝您好运！

Answer 6

img 位于 a 内部，因此您希望定位 a 并将其移至 img 之前CSS 选择器。您可以在这里看到我的作品：http://jsfiddle.net/Skooljester/9zwsJ/16/