0

正常に機能するポートフォリオを持っていますが、現在、そのための CMS を構築しているため、画像をアップロードするだけで、それがサイトに追加されます。ビルドする前に、スクラップ コードの一部を再構築し、JS を利用したギャラリーを CSS を利用したギャラリーに変換します。

CSSでこのクリック効果を実現しようとしています。http://www.tomdwyerdesign.com/graphics/

:focus セレクターを使用して実行できると思っていましたが、少し問題が発生しました。

これはHTMLです：

<a class="tile" href="#">
        <img src="images/thumbs/DLPWD.png" class="dlpwd" />
</a>

これはCSSです：

.tile:focus img{
background-image: url("images/large/DLPWD.png");
width: 771px;
height: 600px;
}

うまく選択できていないようです。理由を知っている人はいますか？

ありがとう。

4

2 に答える 2

1

問題は、リンクがクリックされたときに必ずしもリンクがフォーカスされるとは限らず、リンクに移動したときにフォーカスされることです。これはキーボードで行うか、リンクにクリック ハンドラーを追加することができます。もちろん、その時点で JavaScript に戻りますが、何が起こっているかを示しています。

例えば

<a class="tile" href="#" onclick="this.focus()">
    <img src="images/thumbs/DLPWD.png" class="dlpwd" />
</a>

幸いなことに、JavaScript を必要としない、より良い解決策があります。リンクに tabindex を追加すると、href がどこにも移動していなくても、それをクリックするとフォーカスされます。そう...

<a class="tile" href="#" tabindex="0">
    <img src="images/thumbs/DLPWD.png" class="dlpwd" />
</a>

やりたいことをやればいい。

（次の問題は、背景画像が src 画像の前に表示されないことです-サムネイルの引き伸ばされたバージョンを取得するだけです。しかし、それは別の質問だと思います）

于 2012-11-04T22:24:21.327 に答える
0

:focusキーボード入力を受け取る要素 (つまり、フォーム要素) でのみ使用できます。試してみることもでき:activeますが、マウス ボタンが押されている間だけ CSS が適用されます。

于 2012-11-04T22:05:15.807 に答える