web-dev-qa-db-ja.com

html：ホバーテーブル列

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

できればcssのみを使用します。

javascripthtmlcsscss-tables
20
flybywire

申し訳ありませんが、セルまたは行に対してのみ機能します。例えば.

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 */
6
Jonathan Fingland

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

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

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

出力：

enter image description here

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>
44
ThinkingStiff

もっと簡単な解決策があります（実例： 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/

16
M. Ahmad Zafar

ムハンマドの答えを拡張するために（ https://stackoverflow.com/a/11828637/131628 ）、実際のテーブルでのみ列を強調表示する場合は、jquery-code-partを次のように変更します。このjsfiddleは、実際のテーブルのみに固有です。

jQuery

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

jsFiddle： http://jsfiddle.net/q3HHt/123/

4
Robert Kubiak

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

2
wiifm

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

2
user301794