3

私が取り組んでいるサイトでは、リンクがフォーカスされている/ホバーされている/アクティブになっているときに、リンクの周りに点線のアウトラインを表示したいと考えています。テキストと画像のリンクでこれが発生することを望みます。

私が抱えている問題は、コードが Firefox と IE でうまく動作する一方で、Chrome 7.0.517.41 では、点線のアウトラインが画像の高さではなく、テキストと同じ高さであることです。

サンプルコード:

<!DOCTYPE html> 
<html lang="en"> 
    <head>
        <style type="text/css">
            BODY { font: 15px/1.5 sans-serif; }
            a:focus, a:hover, a:active { outline: 1px dotted #11aa22; }
        </style>
    </head>
    <body>
        <a href="#">
            <img src="http://sstatic.net/stackoverflow/Img/wmd-buttons.png" />
        </a>
    </body>
</html>

これは面倒です。回避策として、javascript を使用して、画像を含むアンカーを区別するクラスを適用し、画像を含むアンカーのアウトラインが画像ではなくアンカーに適用されるようにします。

a:focus, a:hover, a:active { outline: 1px dotted #11aa22; }
a:focus.img, a:hover.img, a:active.img { outline: none; }
a:focus img, a:hover img, a:active img { outline: 1px dotted #11aa22; }

そして、私の文書の準備ができて

$('a:has(img)').addClass('img');

これを行うより良い方法はありますか？

4

1 に答える 1

6

画像をラップするため、リンクをブロックとして設定する必要があります。

a { display:inline-block; }

例えば。

于 2010-10-20T07:36:09.397 に答える