1

<img>要素内に要素があり<div>ます。がクリックされるたびに、(画像を含む)全体divを (変換を使用して) 10% 縮小します。<div>私はそれを機能させましたが、小さな問題が 1 つあります。ユーザーが div 内の画像をクリックしても何も起こりませんが、ユーザーが の背景をクリックするdivと機能します。

基本的に、MyDiv の子がクリックされたときに:activeセレクターを機能させるにはどうすればよいですか。.MyDiv:hover:active { /*scaling logic here*/ }

すべての助けに大歓迎です。私はいつでも答えを受け入れます!

4

1 に答える 1

1

:active疑似クラスとdiv要素

divまず最初に、要素が最初からアクティブ化状態を持つべきではないと確信しています。

Selectors Level 3 W3C Recommendationのuser action pseudo-classes :hover、:active、および:focusセクションを読むと、次のことがわかります。

:active疑似クラスは、要素がユーザーによってアクティブ化されている間に適用されます。たとえば、ユーザーがマウス ボタンを押して離すまでの時間です。複数のマウス ボタンがあるシステムでは:active、プライマリまたはプライマリ アクティベーション ボタン (通常は「左」マウス ボタン) とそのエイリアスにのみ適用されます。

HTML5 W3C Editor's DraftのInteractive Contentセクションに移動すると、次のようになります。

HTML の特定の要素にはアクティブ化動作があり、ユーザーがそれらをアクティブ化できることを意味します。

ユーザー エージェントは、ユーザーがキーボードや音声入力、マウス クリックなどを使用して、アクティブ化動作を持つ要素を手動でトリガーできるようにする必要があります。ユーザーがクリック以外の方法でアクティブ化動作が定義されている要素をトリガーする場合、インタラクション イベントのデフォルト アクションは、要素に対して合成クリック アクティブ化ステップを実行することである必要があります。

HTML401 ドキュメントはアクティベーション状態やユーザー インタラクションについて詳しく説明していないため、HTML401 勧告よりも HTML5 Editor's Draft について言及します。ただし、要素のような要素のアクティブ化については言及していますが、a要素を定義する際にはそれについては何も言及していませんdiv。

このdiv要素 には、HTML5 勧告で定義されている「アクティブ化状態」がありません。インタラクティブ コンテンツカテゴリはなく( elementとはa異なり)、アクティブな状態を適用できるとは述べていません。

回避策

上で説明したように、div要素は状態を受け入れるべきではありません:active。このため、HTML を変更して、要素を使用するようにします。このために、次のa要素を使用しています。

<a href="javascript: void(0)">
    <img />
</a>

これだけでは IE の問題は解決しません。この JSFiddle の例が表示されている場合、img要素をクリックすると、aコンテナーはアクティブ状態になりません。では、これを修正するにはどうすればよいでしょうか。を使用するだけでなく、以下:hover:activeも使用します:hover:focus。

a:hover:active,
a:hover:focus {
    outline: 0; /* Reset the default anchor tag focus style. */
    background: #f00;
}

このJSFiddle demoで見られるように、これにより、IE および他のすべてのブラウザーで同様の機能が得られます。

2 つの (潜在的に望ましくない) 副作用

  1. このアプローチの問題は、要素がフォーカスされた状態を保持し、キーボードのtabキーを使用して要素にアクセスすることでこの効果を実現できることです。フォーカスされた状態の要素にカーソルを合わせると、そのスタイルが変わります。ただし、これが望ましくない副作用であるかどうかを判断するのは私次第ではありません。

  2. 要素がリンクになりました。最初に要素をフォーカスするには、このhrefプロパティが必要です。

余分なスタイリング

a要素の代わりに要素を使用しているdivため、要素をリンクとして区別するブラウザのデフォルト スタイルをリセットする必要があります。このために、次のことが簡単にできます。

a {
    color: #000; /* Reset the color to black. */
    cursor: default; /* Reset the cursor to default. */
    text-decoration: none; /* Remove the underline. */
}

a img {
    border: none; /* Remove border from image. */
}

最終的な JSFiddle デモ。

于 2013-10-24T10:46:15.623 に答える