將懸停邊框應用於圖像

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/