1

マウスを使用できないユーザー向けのサイトを作成しています。彼は、キーボードの Tab キーを押して画像間を移動し、Return キーを押してその画像に関連付けられた href リンクに移動したいと考えています。これだけうまくいきました。

しかし、タブで移動した画像を簡単に確認できるように、何らかの方法で画像を強調表示するにはどうすればよいでしょうか?

jQuery のスキルがないため、コーディングを html と css に維持しようとしています。

コードは次のとおりです。

イメージを変えるクラスを導入できないかと考えました。たとえば、クラス .classA {border:double;} を導入し、それを使用しましたが、うまくいき
ませんでした。多くの効果を試しましたが、どれも機能しませんでした。

彼がタブで移動した画像を強調表示する方法について何か提案はありますか?

4

2 に答える 2

0

彼がタブで移動した画像を強調表示する方法

ページ上のアンカー間でタブ移動すると、その要素が「フォーカス」を獲得します。:focusしたがって、疑似セレクタを使用して、タブ移動されたアンカー内の画像のスタイルを変更できますa:focus img。次に例を示します。

a:focus img {
    border: 1px solid #F00;
}

境界線を追加するとレイアウトが壊れる可能性がありますが、代わりに次のようなことを行うことができます:

box-shadow: 0 0 10px #F00;

要素のレイアウトに影響を与えずに、赤く光らせます。

于 2013-10-10T11:59:33.163 に答える
0

デフォルトでは、ブラウザーはアウトラインを表示することに注意してください。

試す：

img:focus { Outline:なし; ボーダー:2px ソリッド #ABCDEF; }

于 2013-10-10T12:38:14.517 に答える