css - 将悬停边框应用于图像

Question

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

这是小提琴：

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

score 2 · Accepted Answer

有两件事对我来说是错误的。

您a在图像之外，但您的选择器正在内部寻找它。另外，您有一个错字：teaming并且teamimg不匹配。

所以改变：

#content #team img.teaming a:hover {

到

#content #team a:hover img.teamimg {

score 2 · Accepted Answer

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

score 0 · Accepted Answer

它应该是：

#content #team a:hover img.teamimg

你有过：

#content #team img.teaming a:hover

这有两个问题。首先teaming是错误的，它是teamimg（一个 m 不是一个 n）。2、img先到先得a

score 0 · Accepted Answer

这是解决方案

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

score 0 · Accepted Answer

你错误地订购了这种风格：

#content #team img.teaming a:hover

img.teaming在标签内，因此它应该是：

#content #team a:hover img.teaming

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

#content #team a:hover

或者

#content #team a.panel13:hover

祝你好运！

score 0 · Accepted Answer

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

6 回答 6