2

このjsFIDDLEサンプルを見てください

CSS でホバー状態のセルの背景色を変更したい..JavaScript で実現できますが、CSS でそれを行いたいです...さらに、セル全体をリンクとして機能させたい 方法

4

3 に答える 3

6

考慮すべき点がいくつかあります。

  • CSS と表示用の HTML を混在させないでください。混同すると非常に混乱します。色 (テキスト、背景、境界線)、サイズ、配置、サイトの外観に関係するものはすべて CSS に属します。

  • レイアウト目的でテーブルを避けるようにしてください。初心者には簡単に思えるかもしれませんが、時代遅れのテクニックです。

  • :hoverCSS では、ルールの前にルールを移動する必要があります:visited。両方のルールの特異性が同じであるため、最初のルール (現在は:visited) が優先され、訪問済みリンクにはホバー ルールが適用されません。

  • ルールごとに CSS でスタイルを繰り返す必要はありません。継承とカスケードにより、多くのスタイルが子要素に自動的に適用されます。

  • 表のセルの代わりにリンクの背景色を設定する必要があります。その後、テキストの色と同じように、ホバー時に背景色を変更できます。

  • リンクdisplay: blockを指定すると、ブロック要素のデフォルトの動作であるため、リンクはそれを含むブロックの幅全体に広がります。

「クリーンな」CSS と HTML を使用した同じレイアウトがどのように見えるかの例を次に示します。

http://www.jsfiddle.net/QShRF/5/

于 2010-09-21T10:24:56.333 に答える
2

メニューのtableタグに id を指定してから:

#menu-table td:hover { background: whatever; }

ただし、実際には、データ テーブル以外の目的でテーブルを使用するべきではありません。それらは維持が難しく、セマンティクスを壊します。

于 2010-09-21T10:12:41.090 に答える
0

.menu_links:link { display: block }

セル全体をリンクとして機能させます (ただし、少しマージン/パディングを追加する必要があります)。.menu_links:hover { background: #123123 }次に、追加して背景に色を付けることができます。

また、すべてのテーブルのスタイルをスタイルシートで設定することをお勧めします。<table bordercolor="red" bgcolor="#ffffff">非常に時代遅れで、サイトのメンテナンスが大変です。

于 2010-09-21T10:23:23.840 に答える