css - ホバーボーダーを画像に適用する

Question

cssホバーを間違ってターゲットにしていると確信していますが、競合を引き起こしている可能性のある画像に添付されているjqueryもあります。

ここにフィドルがあります：

基本的には、ホバー状態で表示される境界線だけです。

score 2 · Accepted Answer

私には2つのことが間違っているように見えます。

あなた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

これには2つの問題があります。最初teamingは間違っています、それはteamimg(an 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ため、をターゲットにして、CSS セレクターののa前に移動します。imgここで私の作品を見ることができます: http://jsfiddle.net/Skooljester/9zwsJ/16/

6 に答える 6