0

私が何をしようとしているのかを説明しようとしているので、ご容赦ください...

最終的にカスタムメイドのサービス リクエスト ページになるアイコンのグリッドがあります。各アイコンは、ユーザーが送信できるさまざまなタイプのリクエストを表します。これらのグリッド内に、スクリプトで生成されたヘッダー テキストと、リクエストを表す/視覚化するアイコンを配置しようとしています。このアイコンは、含まれているリンクのステータス (通常、ホバー、アクティブなど) に基づいて変化する「スプライト」にもなります。ユーザーが正しいリクエスト タイプを効果的にクリックできるようにするために、各セルのコンテンツは特定のセルのリンク要素内にある必要があります。つまり、ユーザーはそのセルが存在する場所ならどこでもクリックして次のページに移動できます。背景からその領域を描写するために適用されます。

私が直面している問題 - 解決策を思い付くことができなかった - は、セル全体に対してこのリンクを作成し、要素の CSS コーディング (この場合は H2 タグ) を変更する方法です。リンクの状態 (ホバー、アクティブなど) に基づく DIV) と、適切な CSS コーディングはどのように見えるでしょうか?

子/親 CSS コーディングを行うことができることは知っていますが、疑似要素に対してもこれを行うことは可能ですか? もしそうなら、どのように？

<table>
    <tr>
        <td>
            <a href="#" title="exampleCellLink" id="cellblock">
                <h2>Cell Block Title</h2>
                <div id="cellIcon">
                    <!-- DIV placeholder for the sprite image to be placed via CSS coding -->
                </div>
            </a>
        </td>
    </tr>
</table>
4

1 に答える 1

1

親要素に疑似セレクターを適用し、その後に子を含めることで、これを非常に簡単に行うことができます。このような：a:hover h2 { <properties on parent hover> } a:hover div { <properties on parent hover>}

注意: あなたのコードでは、<div id="cellicon">. 名前からして、これはクラスのように聞こえます。同じ ID を再利用すると HTML が壊れることを忘れないでください。

リンクごとに、すべてのアイコンを 1 つのスプライトに含めることもできます。の異なるプロパティを持つ 5 つのアイコン (16x16px) があるとします:hover, :active and :visited。スプライトには、アイコンごとに 4 つの画像があります。

ここに画像の説明を入力

すべてのアイコンのコードは次のようになります: (アイコン 2 の値)

a div { /* first specify the sprite for all links */
  background-image: url('...');
}
a#<linkid> div { /* normal state */
  background-position: -16px 0px;
}
a#<linkid>:hover div { /* hovered state */
  background-position: -16px -16px;
}
a#<linkid>:active div { /*active state */
  background-position: -16px -32px;
}
a#<linkid>:visited div { /* visited state */
  background-position: -16px -48px;
}
于 2013-06-06T12:19:01.060 に答える