25

マウスがその上にあるときに、html テーブル列の背景列を変更するにはどうすればよいですか?

できればcssのみで。

4

8 に答える 8

51

これは、Javascriptを使用せずにCSSを使用して実行できます。

::after疑似要素を使用して強調表示を行いました。クリックイベントを処理する必要がある場合に備えてz-index、下の強調表示を維持します。<tds>大きな高さを使用すると、カラム全体をカバーできます。ハイライトオーバーフローを非表示にしますoverflow: hidden。<table>

デモ： http： //jsfiddle.net/ThinkingStiff/2XeYe/

出力：

ここに画像の説明を入力してください

CSS：

table {
    border-spacing: 0;
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
}

td, th {
    cursor: pointer;
    padding: 10px;
    position: relative;
}

td:hover::after { 
    background-color: #ffa;
    content: '\00a0';  
    height: 10000px;    
    left: 0;
    position: absolute;  
    top: -5000px;
    width: 100%;
    z-index: -1;        
}

HTML：

<table>
    <tr>
        <th></th><th>50kg</th><th>55kg</th><th>60kg</th><th>65kg</th><th>70kg</th>
    </tr>
    <tr>
        <th>160cm</th><td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
    </tr>
    <tr>
        <th>165cm</th><td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
    </tr>
    <tr>
        <th>170cm</th><td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
    </tr>
    <tr>
        <th>175cm</th><td>16</td><td>18</td><td>20</td><td>22</td><td>24</td>
    </tr>
</table>
于 2012-06-24T09:25:33.550 に答える
18

もっと簡単な解決策があります（ライブの例：http://jsfiddle.net/q3HHt/1/）

HTML:

<table>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
  </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
  </tr>
</table>

CSS:

table, td {
    border: 1px solid black;
}

td {
    width: 40px;  
    height: 40px;
}

.highlighted {
    background-color: #348A75;
}

jQuery:

$('td').hover(function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').addClass('highlighted');
},
function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').removeClass('highlighted');
});

実際の例: http://jsfiddle.net/q3HHt/1/

于 2012-08-06T12:49:34.670 に答える
7

セルまたは行でのみ機能します。申し訳ありません。例えば

td {
  background-color: blue;
}

td:hover {
  background-color: red;
}

利用可能な JavaScript ソリューションはありますが、セレクターの制限により、現時点では CSS で目的を達成できるものはありません。

td  /* all cells */
{ 
  background-color: blue;
}

tr /* all rows */
{
  background-color: pink;
}

/* nothing for all columns */
于 2009-10-12T09:32:41.517 に答える
2

画面に表示するには列が多すぎるという同様の問題がありました。PHP 経由で、各行を 1 x 列のテーブルに変換しました。つまり、n 行 = n テーブルです。次に、各テーブルをマスター テーブル内にネストしました。そうすることで、スタイルシートから td:hover を呼び出すことができました。各 td はテーブルを保持していたので、列にマウスを合わせると列が強調表示されるのと同じ効果があります。

于 2010-03-25T15:10:09.557 に答える
1

これを行うためのクリーンな HTML + CSS の方法はないと思います。Javascript は代替手段です。たとえば、jQuery tableHover プラグイン

于 2009-10-12T09:32:30.810 に答える
-2

<col>タグとcol:hover { background: red; }スタイルを試してみることもできますが、うまくいくとは思えません。とにかく、これは古いバージョンの MSIE では確実に機能しないため、これを行うには JavaScript が必要です。

于 2009-10-12T09:32:56.300 に答える
-5

次を使用して、純粋な CSS で行全体を強調表示できます。

tr td {background-color: red;}
tr:hover td {background-color: blue;}

セル (td) は列ではなく行 (tr) の子であるため、このアプローチでは列に対してこの効果を達成することは不可能です。

IE7+ で動作させるには、必ず doctype 宣言を追加してください (とにかく常に行うべきこと:))。

于 2012-06-20T10:58:00.930 に答える